@razorpay/blade
Version:
The Design System that powers Razorpay
64 lines (61 loc) • 3.21 kB
JavaScript
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import { useListItem, useFloatingTree, useMergeRefs } from '@floating-ui/react';
import React__default from 'react';
import { useMenu } from './useMenu.js';
import '../BaseMenu/index.js';
import '../Icons/index.js';
import { jsx } from 'react/jsx-runtime';
import { BaseMenuItem } from '../BaseMenu/BaseMenuItem/BaseMenuItem.js';
import ChevronRightIcon from '../Icons/ChevronRightIcon/ChevronRightIcon.js';
var _excluded = ["title", "isDisabled", "description", "leading", "trailing", "_isMenuTrigger", "_hasFocusInside", "href", "target", "children", "as"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var MenuItem = /*#__PURE__*/React__default.forwardRef(function (_ref, forwardedRef) {
var title = _ref.title,
isDisabled = _ref.isDisabled,
description = _ref.description,
leading = _ref.leading,
trailing = _ref.trailing,
_isMenuTrigger = _ref._isMenuTrigger,
_hasFocusInside = _ref._hasFocusInside,
href = _ref.href,
target = _ref.target,
children = _ref.children,
as = _ref.as,
props = _objectWithoutProperties(_ref, _excluded);
var menu = useMenu();
var item = useListItem({
label: isDisabled && Boolean(children) ? null : title
});
var tree = useFloatingTree();
var isLink = Boolean(href);
var defaultAs = isLink ? 'a' : 'button';
return /*#__PURE__*/jsx(BaseMenuItem, _objectSpread(_objectSpread(_objectSpread({
title: title,
description: description,
leading: leading,
trailing: _isMenuTrigger ? /*#__PURE__*/jsx(ChevronRightIcon, {
color: "interactive.icon.gray.muted"
}) : trailing,
as: as !== null && as !== void 0 ? as : defaultAs,
href: href,
ref: useMergeRefs([item.ref, forwardedRef]),
isDisabled: isDisabled
}, props), _isMenuTrigger ? {} : menu.getItemProps({
onClick: function onClick(event) {
var _props$onClick;
(_props$onClick = props.onClick) === null || _props$onClick === void 0 ? void 0 : _props$onClick.call(props, event);
tree === null || tree === void 0 ? void 0 : tree.events.emit('click');
},
onFocus: function onFocus(event) {
var _props$onFocus;
(_props$onFocus = props.onFocus) === null || _props$onFocus === void 0 ? void 0 : _props$onFocus.call(props, event);
menu.setHasFocusInside(true);
}
})), {}, {
children: children
}));
});
export { MenuItem };
//# sourceMappingURL=MenuItem.web.js.map