@razorpay/blade
Version:
The Design System that powers Razorpay
100 lines (97 loc) • 4.67 kB
JavaScript
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import { useMergeRefs, FloatingNode, FloatingList, FloatingPortal, FloatingFocusManager, useFloatingParentNodeId, FloatingTree } from '@floating-ui/react';
import * as React from 'react';
import { useMenu, useFloatingMenuSetup, MenuContext } from './useMenu.js';
import { jsx, jsxs } from 'react/jsx-runtime';
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 MenuTree = function MenuTree(_ref) {
var children = _ref.children,
_ref$openInteraction = _ref.openInteraction,
openInteraction = _ref$openInteraction === void 0 ? 'click' : _ref$openInteraction,
onOpenChange = _ref.onOpenChange,
isOpenControlled = _ref.isOpen;
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
hasFocusInside = _React$useState2[0],
setHasFocusInside = _React$useState2[1];
var elementsRef = React.useRef([]);
var labelsRef = React.useRef([]);
var parent = useMenu();
var _useFloatingMenuSetup = useFloatingMenuSetup({
elementsRef: elementsRef,
openInteraction: openInteraction,
onOpenChange: onOpenChange,
isOpen: isOpenControlled
}),
getReferenceProps = _useFloatingMenuSetup.getReferenceProps,
getFloatingProps = _useFloatingMenuSetup.getFloatingProps,
getItemProps = _useFloatingMenuSetup.getItemProps,
item = _useFloatingMenuSetup.item,
refs = _useFloatingMenuSetup.refs,
floatingStyles = _useFloatingMenuSetup.floatingStyles,
isOpen = _useFloatingMenuSetup.isOpen,
nodeId = _useFloatingMenuSetup.nodeId,
isNested = _useFloatingMenuSetup.isNested,
context = _useFloatingMenuSetup.context,
isMounted = _useFloatingMenuSetup.isMounted,
floatingTransitionStyles = _useFloatingMenuSetup.floatingTransitionStyles;
var referenceProps = _objectSpread({
ref: useMergeRefs([refs.setReference, item.ref])
}, getReferenceProps(parent.getItemProps({
onFocus: function onFocus() {
setHasFocusInside(false);
parent.setHasFocusInside(true);
}
})));
var floatingProps = _objectSpread({
// eslint-disable-next-line @typescript-eslint/no-explicit-any
ref: refs.setFloating,
style: floatingStyles,
_transitionStyle: floatingTransitionStyles
}, getFloatingProps());
var _ref2 = React.Children.toArray(children),
_ref3 = _slicedToArray(_ref2, 2),
menuTriggerChild = _ref3[0],
menuOverlayChild = _ref3[1];
var triggerWithReferenceProps = /*#__PURE__*/React.cloneElement(menuTriggerChild, _objectSpread(_objectSpread(_objectSpread({}, menuTriggerChild.props), referenceProps), {}, {
_hasFocusInside: hasFocusInside,
_isMenuTrigger: true
}));
var overlayWithFloatingProps = /*#__PURE__*/React.cloneElement(menuOverlayChild, _objectSpread(_objectSpread({}, menuOverlayChild.props), floatingProps));
return /*#__PURE__*/jsx(FloatingNode, {
id: nodeId,
children: /*#__PURE__*/jsxs(MenuContext.Provider, {
value: {
getItemProps: getItemProps,
setHasFocusInside: setHasFocusInside,
isOpen: isOpen
},
children: [triggerWithReferenceProps, /*#__PURE__*/jsx(FloatingList, {
elementsRef: elementsRef,
labelsRef: labelsRef,
children: isMounted && /*#__PURE__*/jsx(FloatingPortal, {
children: /*#__PURE__*/jsx(FloatingFocusManager, {
context: context,
modal: false,
initialFocus: -1,
returnFocus: !isNested,
children: overlayWithFloatingProps
})
})
})]
})
});
};
var Menu = function Menu(props) {
var parentId = useFloatingParentNodeId();
if (parentId === null) {
return /*#__PURE__*/jsx(FloatingTree, {
children: /*#__PURE__*/jsx(MenuTree, _objectSpread({}, props))
});
}
return /*#__PURE__*/jsx(MenuTree, _objectSpread({}, props));
};
export { Menu };
//# sourceMappingURL=Menu.web.js.map