@navikt/ds-react/esm/toggle-group/parts/useToggleItem.js

React components from the Norwegian Labour and Welfare Administration.

import { useCallback } from "react";
import { composeEventHandlers } from "../../util/composeEventHandlers.js";
import { mergeRefs } from "../../util/hooks/useMergeRefs.js";
import { useToggleGroupContext, useToggleGroupDescendant, } from "../ToggleGroup.context.js";
export function useToggleItem({ value, disabled = false, onFocus: _onFocus, onClick, onKeyDown: _onKeyDown, }, ref) {
    const { setSelectedValue, setFocusedValue, selectedValue, focusedValue } = useToggleGroupContext();
    const { register, descendants } = useToggleGroupDescendant({
        disabled,
        value,
    });
    const isSelected = value === selectedValue;
    const onFocus = () => setFocusedValue(value);
    /**
     * Implements roving-tabindex for horizontal tabs
     */
    const onKeyDown = useCallback((event) => {
        /**
         * ToggleGroup.Item is registered with its prop 'value'.
         * We can then use it to find the current focuses descendant
         */
        const idx = descendants
            .values()
            .findIndex((x) => x.value === focusedValue);
        const nextTab = () => {
            var _a;
            const next = descendants.nextEnabled(idx, false);
            (_a = next === null || next === void 0 ? void 0 : next.node) === null || _a === void 0 ? void 0 : _a.focus();
        };
        const prevTab = () => {
            var _a;
            const prev = descendants.prevEnabled(idx, false);
            (_a = prev === null || prev === void 0 ? void 0 : prev.node) === null || _a === void 0 ? void 0 : _a.focus();
        };
        const firstTab = () => {
            var _a;
            const first = descendants.firstEnabled();
            (_a = first === null || first === void 0 ? void 0 : first.node) === null || _a === void 0 ? void 0 : _a.focus();
        };
        const lastTab = () => {
            var _a;
            const last = descendants.lastEnabled();
            (_a = last === null || last === void 0 ? void 0 : last.node) === null || _a === void 0 ? void 0 : _a.focus();
        };
        const keyMap = {
            ArrowLeft: prevTab,
            ArrowRight: nextTab,
            Home: firstTab,
            End: lastTab,
        };
        const hasModifiers = event.shiftKey || event.ctrlKey || event.altKey || event.metaKey;
        const action = keyMap[event.key];
        if (action && !hasModifiers) {
            event.preventDefault();
            action(event);
        }
        else if (event.key === "Tab") {
            /**
             * Imperative focus during keydown is risky so we prevent React's batching updates
             * to avoid potential bugs. See: https://github.com/facebook/react/issues/20332
             */
            selectedValue && setTimeout(() => setFocusedValue(selectedValue));
        }
    }, [descendants, focusedValue, selectedValue, setFocusedValue]);
    return {
        ref: mergeRefs([register, ref]),
        isSelected,
        isFocused: focusedValue === value,
        onClick: composeEventHandlers(onClick, () => selectedValue !== value && setSelectedValue(value)),
        onFocus: disabled ? undefined : composeEventHandlers(_onFocus, onFocus),
        onKeyDown: composeEventHandlers(_onKeyDown, onKeyDown),
    };
}
//# sourceMappingURL=useToggleItem.js.map