@wordpress/components
Version:
UI components for WordPress.
195 lines (189 loc) • 7.23 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.Menu = void 0;
var Ariakit = _interopRequireWildcard(require("@ariakit/react"));
var _element = require("@wordpress/element");
var _i18n = require("@wordpress/i18n");
var _context = require("../context");
var _context2 = require("./context");
var _item = require("./item");
var _checkboxItem = require("./checkbox-item");
var _radioItem = require("./radio-item");
var _group = require("./group");
var _groupLabel = require("./group-label");
var _separator = require("./separator");
var _itemLabel = require("./item-label");
var _itemHelpText = require("./item-help-text");
var _triggerButton = require("./trigger-button");
var _submenuTriggerItem = require("./submenu-trigger-item");
var _popover = require("./popover");
var _jsxRuntime = require("react/jsx-runtime");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const UnconnectedMenu = props => {
const {
children,
defaultOpen = false,
open,
onOpenChange,
placement,
// From internal components context
variant
} = (0, _context.useContextSystem)(props, 'Menu');
const parentContext = (0, _element.useContext)(_context2.Context);
const rtl = (0, _i18n.isRTL)();
// If an explicit value for the `placement` prop is not passed,
// apply a default placement of `bottom-start` for the root menu popover,
// and of `right-start` for nested menu popovers.
let computedPlacement = placement !== null && placement !== void 0 ? placement : parentContext?.store ? 'right-start' : 'bottom-start';
// Swap left/right in case of RTL direction
if (rtl) {
if (/right/.test(computedPlacement)) {
computedPlacement = computedPlacement.replace('right', 'left');
} else if (/left/.test(computedPlacement)) {
computedPlacement = computedPlacement.replace('left', 'right');
}
}
const menuStore = Ariakit.useMenuStore({
parent: parentContext?.store,
open,
defaultOpen,
placement: computedPlacement,
focusLoop: true,
setOpen(willBeOpen) {
onOpenChange?.(willBeOpen);
},
rtl
});
const contextValue = (0, _element.useMemo)(() => ({
store: menuStore,
variant
}), [menuStore, variant]);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_context2.Context.Provider, {
value: contextValue,
children: children
});
};
/**
* Menu is a collection of React components that combine to render
* ARIA-compliant [menu](https://www.w3.org/WAI/ARIA/apg/patterns/menu/) and
* [menu button](https://www.w3.org/WAI/ARIA/apg/patterns/menubutton/) patterns.
*
* `Menu` itself is a wrapper component and context provider.
* It is responsible for managing the state of the menu and its items, and for
* rendering the `Menu.TriggerButton` (or the `Menu.SubmenuTriggerItem`)
* component, and the `Menu.Popover` component.
*/
const Menu = exports.Menu = Object.assign((0, _context.contextConnectWithoutRef)(UnconnectedMenu, 'Menu'), {
Context: Object.assign(_context2.Context, {
displayName: 'Menu.Context'
}),
/**
* Renders a menu item inside the `Menu.Popover` or `Menu.Group` components.
*
* It can optionally contain one instance of the `Menu.ItemLabel` component
* and one instance of the `Menu.ItemHelpText` component.
*/
Item: Object.assign(_item.Item, {
displayName: 'Menu.Item'
}),
/**
* Renders a radio menu item inside the `Menu.Popover` or `Menu.Group`
* components.
*
* It can optionally contain one instance of the `Menu.ItemLabel` component
* and one instance of the `Menu.ItemHelpText` component.
*/
RadioItem: Object.assign(_radioItem.RadioItem, {
displayName: 'Menu.RadioItem'
}),
/**
* Renders a checkbox menu item inside the `Menu.Popover` or `Menu.Group`
* components.
*
* It can optionally contain one instance of the `Menu.ItemLabel` component
* and one instance of the `Menu.ItemHelpText` component.
*/
CheckboxItem: Object.assign(_checkboxItem.CheckboxItem, {
displayName: 'Menu.CheckboxItem'
}),
/**
* Renders a group for menu items.
*
* It should contain one instance of `Menu.GroupLabel` and one or more
* instances of `Menu.Item`, `Menu.RadioItem`, or `Menu.CheckboxItem`.
*/
Group: Object.assign(_group.Group, {
displayName: 'Menu.Group'
}),
/**
* Renders a label in a menu group.
*
* This component should be wrapped with `Menu.Group` so the
* `aria-labelledby` is correctly set on the group element.
*/
GroupLabel: Object.assign(_groupLabel.GroupLabel, {
displayName: 'Menu.GroupLabel'
}),
/**
* Renders a divider between menu items or menu groups.
*/
Separator: Object.assign(_separator.Separator, {
displayName: 'Menu.Separator'
}),
/**
* Renders a menu item's label text. It should be wrapped with `Menu.Item`,
* `Menu.RadioItem`, or `Menu.CheckboxItem`.
*/
ItemLabel: Object.assign(_itemLabel.ItemLabel, {
displayName: 'Menu.ItemLabel'
}),
/**
* Renders a menu item's help text. It should be wrapped with `Menu.Item`,
* `Menu.RadioItem`, or `Menu.CheckboxItem`.
*/
ItemHelpText: Object.assign(_itemHelpText.ItemHelpText, {
displayName: 'Menu.ItemHelpText'
}),
/**
* Renders a dropdown menu element that's controlled by a sibling
* `Menu.TriggerButton` component. It renders a popover and automatically
* focuses on items when the menu is shown.
*
* The only valid children of `Menu.Popover` are `Menu.Item`,
* `Menu.RadioItem`, `Menu.CheckboxItem`, `Menu.Group`, `Menu.Separator`,
* and `Menu` (for nested dropdown menus).
*/
Popover: Object.assign(_popover.Popover, {
displayName: 'Menu.Popover'
}),
/**
* Renders a menu button that toggles the visibility of a sibling
* `Menu.Popover` component when clicked or when using arrow keys.
*/
TriggerButton: Object.assign(_triggerButton.TriggerButton, {
displayName: 'Menu.TriggerButton'
}),
/**
* Renders a menu item that toggles the visibility of a sibling
* `Menu.Popover` component when clicked or when using arrow keys.
*
* This component is used to create a nested dropdown menu.
*/
SubmenuTriggerItem: Object.assign(_submenuTriggerItem.SubmenuTriggerItem, {
displayName: 'Menu.SubmenuTriggerItem'
})
});
var _default = exports.default = Menu;
//# sourceMappingURL=index.js.map