@navikt/ds-react
Version:
React components from the Norwegian Labour and Welfare Administration.
76 lines • 3.54 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useToggleItem = useToggleItem;
const react_1 = require("react");
const composeEventHandlers_1 = require("../../util/composeEventHandlers");
const useMergeRefs_1 = require("../../util/hooks/useMergeRefs");
const ToggleGroup_context_1 = require("../ToggleGroup.context");
function useToggleItem({ value, disabled = false, onFocus: _onFocus, onClick, onKeyDown: _onKeyDown, }, ref) {
const { setSelectedValue, setFocusedValue, selectedValue, focusedValue } = (0, ToggleGroup_context_1.useToggleGroupContext)();
const { register, descendants } = (0, ToggleGroup_context_1.useToggleGroupDescendant)({
disabled,
value,
});
const isSelected = value === selectedValue;
const onFocus = () => setFocusedValue(value);
/**
* Implements roving-tabindex for horizontal tabs
*/
const onKeyDown = (0, react_1.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: (0, useMergeRefs_1.mergeRefs)([register, ref]),
isSelected,
isFocused: focusedValue === value,
onClick: (0, composeEventHandlers_1.composeEventHandlers)(onClick, () => selectedValue !== value && setSelectedValue(value)),
onFocus: disabled ? undefined : (0, composeEventHandlers_1.composeEventHandlers)(_onFocus, onFocus),
onKeyDown: (0, composeEventHandlers_1.composeEventHandlers)(_onKeyDown, onKeyDown),
};
}
//# sourceMappingURL=useToggleItem.js.map