@wordpress/components
Version:
UI components for WordPress.
191 lines (185 loc) • 7.52 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.Menu = void 0;
var _react = _interopRequireWildcard(require("@ariakit/react"));
var Ariakit = _react;
var _element = require("@wordpress/element");
var _i18n = require("@wordpress/i18n");
var _icons = require("@wordpress/icons");
var _context = require("../context");
var Styled = _interopRequireWildcard(require("./styles"));
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 _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, ref) => {
var _props$placement;
const {
// Store props
open,
defaultOpen = false,
onOpenChange,
placement,
// Menu trigger props
trigger,
// Menu props
gutter,
children,
shift,
modal = true,
// From internal components context
variant,
// Rest
...otherProps
} = (0, _context.useContextSystem)(props, 'Menu');
const parentContext = (0, _element.useContext)(_context2.MenuContext);
const computedDirection = (0, _i18n.isRTL)() ? 'rtl' : 'ltr';
// 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 = (_props$placement = props.placement) !== null && _props$placement !== void 0 ? _props$placement : parentContext?.store ? 'right-start' : 'bottom-start';
// Swap left/right in case of RTL direction
if (computedDirection === '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: computedDirection === 'rtl'
});
const contextValue = (0, _element.useMemo)(() => ({
store: menuStore,
variant
}), [menuStore, variant]);
// Extract the side from the applied placement — useful for animations.
// Using `currentPlacement` instead of `placement` to make sure that we
// use the final computed placement (including "flips" etc).
const appliedPlacementSide = (0, _react.useStoreState)(menuStore, 'currentPlacement').split('-')[0];
if (menuStore.parent && !((0, _element.isValidElement)(trigger) && _item.MenuItem === trigger.type)) {
// eslint-disable-next-line no-console
console.warn('For nested Menus, the `trigger` should always be a `MenuItem`.');
}
const hideOnEscape = (0, _element.useCallback)(event => {
// Pressing Escape can cause unexpected consequences (ie. exiting
// full screen mode on MacOs, close parent modals...).
event.preventDefault();
// Returning `true` causes the menu to hide.
return true;
}, []);
const wrapperProps = (0, _element.useMemo)(() => ({
dir: computedDirection,
style: {
direction: computedDirection
}
}), [computedDirection]);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Ariakit.MenuButton, {
ref: ref,
store: menuStore,
render: menuStore.parent ? (0, _element.cloneElement)(trigger, {
// Add submenu arrow, unless a `suffix` is explicitly specified
suffix: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [trigger.props.suffix, /*#__PURE__*/(0, _jsxRuntime.jsx)(Styled.SubmenuChevronIcon, {
"aria-hidden": "true",
icon: _icons.chevronRightSmall,
size: 24,
preserveAspectRatio: "xMidYMid slice"
})]
})
}) : trigger
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Ariakit.Menu, {
...otherProps,
modal: modal,
store: menuStore
// Root menu has an 8px distance from its trigger,
// otherwise 0 (which causes the submenu to slightly overlap)
,
gutter: gutter !== null && gutter !== void 0 ? gutter : menuStore.parent ? 0 : 8
// Align nested menu by the same (but opposite) amount
// as the menu container's padding.
,
shift: shift !== null && shift !== void 0 ? shift : menuStore.parent ? -4 : 0,
hideOnHoverOutside: false,
"data-side": appliedPlacementSide,
wrapperProps: wrapperProps,
hideOnEscape: hideOnEscape,
unmountOnHide: true,
render: renderProps =>
/*#__PURE__*/
// Two wrappers are needed for the entry animation, where the menu
// container scales with a different factor than its contents.
// The {...renderProps} are passed to the inner wrapper, so that the
// menu element is the direct parent of the menu item elements.
(0, _jsxRuntime.jsx)(Styled.MenuPopoverOuterWrapper, {
variant: variant,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Styled.MenuPopoverInnerWrapper, {
...renderProps
})
}),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_context2.MenuContext.Provider, {
value: contextValue,
children: children
})
})]
});
};
const Menu = exports.Menu = Object.assign((0, _context.contextConnect)(UnconnectedMenu, 'Menu'), {
Context: Object.assign(_context2.MenuContext, {
displayName: 'Menu.Context'
}),
Item: Object.assign(_item.MenuItem, {
displayName: 'Menu.Item'
}),
RadioItem: Object.assign(_radioItem.MenuRadioItem, {
displayName: 'Menu.RadioItem'
}),
CheckboxItem: Object.assign(_checkboxItem.MenuCheckboxItem, {
displayName: 'Menu.CheckboxItem'
}),
Group: Object.assign(_group.MenuGroup, {
displayName: 'Menu.Group'
}),
GroupLabel: Object.assign(_groupLabel.MenuGroupLabel, {
displayName: 'Menu.GroupLabel'
}),
Separator: Object.assign(_separator.MenuSeparator, {
displayName: 'Menu.Separator'
}),
ItemLabel: Object.assign(_itemLabel.MenuItemLabel, {
displayName: 'Menu.ItemLabel'
}),
ItemHelpText: Object.assign(_itemHelpText.MenuItemHelpText, {
displayName: 'Menu.ItemHelpText'
})
});
var _default = exports.default = Menu;
//# sourceMappingURL=index.js.map