@fluentui/react-northstar
Version:
A themable React component library.
266 lines (264 loc) • 10.9 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.menuButtonSlotClassNames = exports.menuButtonClassName = exports.MenuButton = void 0;
var _invoke2 = _interopRequireDefault(require("lodash/invoke"));
var React = _interopRequireWildcard(require("react"));
var PropTypes = _interopRequireWildcard(require("prop-types"));
var _accessibility = require("@fluentui/accessibility");
var _reactComponentRef = require("@fluentui/react-component-ref");
var customPropTypes = _interopRequireWildcard(require("@fluentui/react-proptypes"));
var _utils = require("../../utils");
var _factories = require("../../utils/factories");
var _Popup = require("../Popup/Popup");
var _Menu = require("../Menu/Menu");
var _focusUtils = require("./focusUtils");
var _positioner = require("../../utils/positioner");
var _reactBindings = require("@fluentui/react-bindings");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
var menuButtonClassName = 'ui-menubutton';
exports.menuButtonClassName = menuButtonClassName;
var menuButtonSlotClassNames = {
menu: menuButtonClassName + "__menu"
};
exports.menuButtonSlotClassNames = menuButtonSlotClassNames;
/**
* A MenuButton displays a menu connected to trigger element.
* @accessibility
*/
var MenuButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
var context = (0, _reactBindings.useFluentContext)();
var _useTelemetry = (0, _reactBindings.useTelemetry)(MenuButton.displayName, context.telemetry),
setStart = _useTelemetry.setStart,
setEnd = _useTelemetry.setEnd;
setStart();
var contextMenu = props.contextMenu,
menu = props.menu,
accessibility = props.accessibility,
align = props.align,
className = props.className,
defaultOpen = props.defaultOpen,
flipBoundary = props.flipBoundary,
mountNode = props.mountNode,
mouseLeaveDelay = props.mouseLeaveDelay,
offset = props.offset,
on = props.on,
onOpenChange = props.onOpenChange,
overflowBoundary = props.overflowBoundary,
pointing = props.pointing,
popperRef = props.popperRef,
position = props.position,
positionFixed = props.positionFixed,
tabbableTrigger = props.tabbableTrigger,
target = props.target,
trigger = props.trigger,
unstable_disableTether = props.unstable_disableTether,
unstable_pinned = props.unstable_pinned,
autoSize = props.autoSize,
variables = props.variables;
var _useAutoControlled = (0, _reactBindings.useAutoControlled)({
defaultValue: props.defaultOpen,
value: props.open,
initialValue: false
}),
open = _useAutoControlled[0],
setOpen = _useAutoControlled[1];
(0, _reactBindings.useOnIFrameFocus)(open, context.target, function (e) {
setOpen(function (__) {
(0, _invoke2.default)(props, 'onOpenChange', e, Object.assign({}, props, {
open: false
}));
return false;
});
});
var menuId = React.useRef();
menuId.current = (0, _utils.getOrGenerateIdFromShorthand)('menubutton-menu-', menu, menuId.current);
var triggerId = React.useRef();
triggerId.current = (0, _utils.getOrGenerateIdFromShorthand)('menubutton-trigger-', trigger, triggerId.current);
var triggerRef = React.useRef();
var menuRef = React.useRef();
var ElementType = (0, _reactBindings.getElementType)(props);
var unhandledProps = (0, _reactBindings.useUnhandledProps)(MenuButton.handledProps, props);
var getA11yProps = (0, _reactBindings.useAccessibility)(accessibility, {
debugName: MenuButton.displayName,
actionHandlers: {
closeMenu: function closeMenu(e) {
return _closeMenu(e);
},
openAndFocusFirst: function openAndFocusFirst(e) {
return openAndFocus(e, 'first');
},
openAndFocusLast: function openAndFocusLast(e) {
return openAndFocus(e, 'last');
}
},
mapPropsToBehavior: function mapPropsToBehavior() {
return {
menuId: menuId.current,
triggerId: triggerId.current,
open: open,
trigger: props.trigger,
contextMenu: contextMenu,
on: on,
tabbableTrigger: tabbableTrigger
};
},
rtl: context.rtl
});
var popupProps = {
accessibility: accessibility,
align: align,
defaultOpen: defaultOpen,
mountNode: mountNode,
mouseLeaveDelay: mouseLeaveDelay,
flipBoundary: flipBoundary,
offset: offset,
on: on,
onOpenChange: onOpenChange,
open: open,
overflowBoundary: overflowBoundary,
pointing: pointing,
popperRef: popperRef,
position: position,
positionFixed: positionFixed,
tabbableTrigger: tabbableTrigger,
target: target,
trigger: trigger,
unstable_disableTether: unstable_disableTether,
unstable_pinned: unstable_pinned,
autoSize: autoSize
};
var _useStyles = (0, _reactBindings.useStyles)(MenuButton.displayName, {
className: menuButtonClassName,
mapPropsToInlineStyles: function mapPropsToInlineStyles() {
return {
className: className,
styles: props.styles,
variables: variables
};
},
rtl: context.rtl
}),
classes = _useStyles.classes,
resolvedStyles = _useStyles.styles;
var _closeMenu = function _closeMenu(e) {
handleOpenChange(e, false);
};
var openAndFocus = function openAndFocus(e, which) {
e.preventDefault();
handleOpenChange(e, true, function () {
return menuRef.current && (0, _focusUtils.focusMenuItem)(menuRef.current, which);
});
};
var handleOpenChange = function handleOpenChange(e, open, callback) {
(0, _invoke2.default)(props, 'onOpenChange', e, Object.assign({}, props, {
open: open
}));
setOpen(open);
callback && callback();
};
var handleMenuOverrides = function handleMenuOverrides(predefinedProps) {
return {
onItemClick: function onItemClick(e, itemProps) {
(0, _invoke2.default)(predefinedProps, 'onItemClick', e, itemProps);
(0, _invoke2.default)(props, 'onMenuItemClick', e, itemProps);
if (!itemProps || !itemProps.menu) {
// do not close if clicked on item with submenu
handleOpenChange(e, false);
}
},
onKeyDown: function onKeyDown(e, itemProps) {
(0, _invoke2.default)(predefinedProps, 'onKeyDown', e, itemProps);
if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
e.stopPropagation();
}
}
};
};
var content = _Menu.Menu.create(menu, {
defaultProps: function defaultProps() {
return getA11yProps('menu', {
vertical: true,
className: menuButtonSlotClassNames.menu
});
},
overrideProps: handleMenuOverrides
});
var overrideProps = Object.assign({
accessibility: getA11yProps.unstable_behaviorDefinition,
open: open,
onOpenChange: function onOpenChange(e, _ref) {
var open = _ref.open;
handleOpenChange(e, open);
},
content: {
styles: resolvedStyles.popupContent,
content: content && /*#__PURE__*/React.createElement(_reactComponentRef.Ref, {
innerRef: menuRef
}, content)
},
children: undefined
}, contextMenu ? {
on: 'context',
trapFocus: true,
tabbableTrigger: false
} : {
inline: true,
autoFocus: true
});
var popup = _Popup.Popup.create(popupProps, {
overrideProps: overrideProps
});
if (contextMenu) {
setEnd();
return popup;
}
var element = getA11yProps.unstable_wrapWithFocusZone( /*#__PURE__*/React.createElement(ElementType, getA11yProps('root', Object.assign({
ref: ref,
className: classes.root
}, unhandledProps)), /*#__PURE__*/React.createElement(_reactComponentRef.Ref, {
innerRef: triggerRef
}, popup)));
setEnd();
return element;
});
exports.MenuButton = MenuButton;
MenuButton.displayName = 'MenuButton';
MenuButton.propTypes = Object.assign({}, _utils.commonPropTypes.createCommon({
content: false
}), {
align: PropTypes.oneOf(_positioner.ALIGNMENTS),
defaultOpen: PropTypes.bool,
mountNode: customPropTypes.domNode,
mouseLeaveDelay: PropTypes.number,
offset: PropTypes.oneOfType([PropTypes.func, PropTypes.arrayOf(PropTypes.number)]),
on: PropTypes.oneOfType([PropTypes.oneOf(['hover', 'click', 'focus', 'context']), PropTypes.arrayOf(PropTypes.oneOf(['click', 'focus', 'context'])), PropTypes.arrayOf(PropTypes.oneOf(['hover', 'focus', 'context']))]),
flipBoundary: PropTypes.oneOfType([PropTypes.object, PropTypes.arrayOf(PropTypes.object), PropTypes.oneOf(['clippingParents', 'window', 'scrollParent'])]),
overflowBoundary: PropTypes.oneOfType([PropTypes.object, PropTypes.arrayOf(PropTypes.object), PropTypes.oneOf(['clippingParents', 'window', 'scrollParent'])]),
open: PropTypes.bool,
onMenuItemClick: PropTypes.func,
onOpenChange: PropTypes.func,
popperRef: customPropTypes.ref,
position: PropTypes.oneOf(_positioner.POSITIONS),
positionFixed: PropTypes.bool,
target: PropTypes.any,
trigger: customPropTypes.every([customPropTypes.disallow(['children']), PropTypes.any]),
tabbableTrigger: PropTypes.bool,
unstable_disableTether: PropTypes.oneOf([true, false, 'all']),
unstable_pinned: PropTypes.bool,
autoSize: PropTypes.oneOf(_positioner.AUTOSIZES),
menu: PropTypes.oneOfType([customPropTypes.itemShorthandWithoutJSX, PropTypes.arrayOf(customPropTypes.itemShorthandWithoutJSX)]),
contextMenu: PropTypes.bool
});
MenuButton.defaultProps = {
accessibility: _accessibility.menuButtonBehavior,
align: 'start',
position: 'below'
};
MenuButton.handledProps = Object.keys(MenuButton.propTypes);
MenuButton.create = (0, _factories.createShorthandFactory)({
Component: MenuButton,
mappedProp: 'menu'
});
//# sourceMappingURL=MenuButton.js.map