@wordpress/components
Version:
UI components for WordPress.
94 lines (89 loc) • 2.58 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.NavigableMenu = void 0;
exports.UnforwardedNavigableMenu = UnforwardedNavigableMenu;
exports.default = void 0;
var _element = require("@wordpress/element");
var _container = _interopRequireDefault(require("./container"));
var _jsxRuntime = require("react/jsx-runtime");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function UnforwardedNavigableMenu({
role = 'menu',
orientation = 'vertical',
...rest
}, ref) {
const eventToOffset = evt => {
const {
code
} = evt;
let next = ['ArrowDown'];
let previous = ['ArrowUp'];
if (orientation === 'horizontal') {
next = ['ArrowRight'];
previous = ['ArrowLeft'];
}
if (orientation === 'both') {
next = ['ArrowRight', 'ArrowDown'];
previous = ['ArrowLeft', 'ArrowUp'];
}
if (next.includes(code)) {
return 1;
} else if (previous.includes(code)) {
return -1;
} else if (['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight'].includes(code)) {
// Key press should be handled, e.g. have event propagation and
// default behavior handled by NavigableContainer but not result
// in an offset.
return 0;
}
return undefined;
};
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_container.default, {
ref: ref,
stopNavigationEvents: true,
onlyBrowserTabstops: false,
role: role,
"aria-orientation": role !== 'presentation' && (orientation === 'vertical' || orientation === 'horizontal') ? orientation : undefined,
eventToOffset: eventToOffset,
...rest
});
}
/**
* A container for a navigable menu.
*
* ```jsx
* import {
* NavigableMenu,
* Button,
* } from '@wordpress/components';
*
* function onNavigate( index, target ) {
* console.log( `Navigates to ${ index }`, target );
* }
*
* const MyNavigableContainer = () => (
* <div>
* <span>Navigable Menu:</span>
* <NavigableMenu onNavigate={ onNavigate } orientation="horizontal">
* <Button variant="secondary">Item 1</Button>
* <Button variant="secondary">Item 2</Button>
* <Button variant="secondary">Item 3</Button>
* </NavigableMenu>
* </div>
* );
* ```
*/
const NavigableMenu = exports.NavigableMenu = (0, _element.forwardRef)(UnforwardedNavigableMenu);
var _default = exports.default = NavigableMenu;
//# sourceMappingURL=menu.js.map