@navikt/ds-react
Version:
React components from the Norwegian Labour and Welfare Administration.
100 lines • 3.89 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.VirtualFocus = void 0;
const react_1 = __importStar(require("react"));
const hooks_1 = require("../../util/hooks");
const Context_1 = require("./Context");
const VirtualFocusAnchor_1 = require("./parts/VirtualFocusAnchor");
const VirtualFocusContent_1 = require("./parts/VirtualFocusContent");
const VirtualFocusItem_1 = require("./parts/VirtualFocusItem");
/**
* 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>
* ```
*/
const VirtualFocus = ({ children, loop = false }) => {
const descendants = (0, Context_1.useVirtualFocusDescendantInitializer)();
const [virtualFocusIdx, setVirtualFocusIdx] = (0, react_1.useState)(0);
return (react_1.default.createElement(Context_1.VirtualFocusInternalContextProvider, { virtualFocusIdx: virtualFocusIdx, setVirtualFocusIdx: setVirtualFocusIdx, loop: loop, uniqueId: (0, hooks_1.useId)() },
react_1.default.createElement(Context_1.VirtualFocusDescendantsProvider, { value: descendants }, children)));
};
exports.VirtualFocus = VirtualFocus;
exports.VirtualFocus.Anchor = VirtualFocusAnchor_1.VirtualFocusAnchor;
exports.VirtualFocus.Item = VirtualFocusItem_1.VirtualFocusItem;
exports.VirtualFocus.Content = VirtualFocusContent_1.VirtualFocusContent;
exports.default = exports.VirtualFocus;
//# sourceMappingURL=VirtualFocus.js.map