@navikt/ds-react
Version:
React components from the Norwegian Labour and Welfare Administration.
63 lines • 2.31 kB
JavaScript
import React, { useState } from "react";
import { useId } from "../../util/hooks/index.js";
import { VirtualFocusDescendantsProvider, VirtualFocusInternalContextProvider, useVirtualFocusDescendantInitializer, } from "./Context.js";
import { VirtualFocusAnchor } from "./parts/VirtualFocusAnchor.js";
import { VirtualFocusContent } from "./parts/VirtualFocusContent.js";
import { VirtualFocusItem } from "./parts/VirtualFocusItem.js";
/**
* A component that manages a virtual focus using the 'up' and 'down'
* arrow keys as well as selection with 'Return'.
*
* @see [📝 Documentation](https://aksel.nav.no/komponenter/core/virtualfocus)
* @see 🏷️ {@link AccordionProps}
*
* @example
* ```jsx
* <VirtualFocus>
* <VirtualFocus.Anchor
* role="combobox"
* onSelect={() => {
* console.log("you selected the anchor");
* }}
* onActive={() => {
* console.log("the anchor is now virtually focused");
* }}
* >
* <input type="text" />
* </VirtualFocus.Anchor>
* <VirtualFocus.Content>
* <VirtualFocus.Item
* onSelect={() => {
* console.log("you selected the item");
* }}
* onActive={() => {
* console.log("the item is now virtually focused");
* }}
* >
* <p>item 1</p>
* </VirtualFocus.Item>
* <VirtualFocus.Item
* onSelect={() => {
* console.log("you selected the item");
* }}
* onActive={() => {
* console.log("the item is now virtually focused");
* }}
* >
* <p>item 2</p>
* </VirtualFocus.Item>
* </VirtualFocus.Content>
* </VirtualFocus>
* ```
*/
export const VirtualFocus = ({ children, loop = false }) => {
const descendants = useVirtualFocusDescendantInitializer();
const [virtualFocusIdx, setVirtualFocusIdx] = useState(0);
return (React.createElement(VirtualFocusInternalContextProvider, { virtualFocusIdx: virtualFocusIdx, setVirtualFocusIdx: setVirtualFocusIdx, loop: loop, uniqueId: useId() },
React.createElement(VirtualFocusDescendantsProvider, { value: descendants }, children)));
};
VirtualFocus.Anchor = VirtualFocusAnchor;
VirtualFocus.Item = VirtualFocusItem;
VirtualFocus.Content = VirtualFocusContent;
export default VirtualFocus;
//# sourceMappingURL=VirtualFocus.js.map