@engie-group/fluid-design-system-react/lib/components/menu/selection/NJMenuSelection.js

Fluid Design System React

import { jsx } from 'react/jsx-runtime';
import { useCallback } from 'react';
import { useStateControl } from '../../../utils/hook.js';
import { NJMenuSelectionContext } from '../NJMenuSelectionContext.js';

const NJMenuSelection = ({ children, multiselection, closeOnSelect = true, onSelection, initialSelectedIndexes = [], selectedIndexes: controlledSelectedIndexes }) => {
    const [selectedIndexes, setSelectedIndexes] = useStateControl(initialSelectedIndexes, controlledSelectedIndexes);
    const selectItem = useCallback((index) => {
        let newSelectedIndexes;
        if (multiselection) {
            newSelectedIndexes = selectedIndexes?.includes(index)
                ? selectedIndexes?.filter((i) => i !== index)
                : [...(selectedIndexes ?? []), index];
        }
        else {
            newSelectedIndexes = [index];
        }
        setSelectedIndexes(newSelectedIndexes);
        onSelection?.(newSelectedIndexes);
    }, [multiselection, selectedIndexes]);
    return (jsx(NJMenuSelectionContext.Provider, { value: {
            selectItem,
            closeOnSelect,
            selectedIndexes: selectedIndexes ?? []
        }, children: children }));
};

export { NJMenuSelection };