"use strict"; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); exports.__esModule = true; exports.default = void 0; exports.getDropdownMenuPlacement = getDropdownMenuPlacement; var _classnames = _interopRequireDefault(require("classnames")); var React = _interopRequireWildcard(require("react")); var _DropdownMenu = require("@restart/ui/DropdownMenu"); var _useIsomorphicEffect = _interopRequireDefault(require("@restart/hooks/useIsomorphicEffect")); var _useMergedRefs = _interopRequireDefault(require("@restart/hooks/useMergedRefs")); var _warning = _interopRequireDefault(require("warning")); var _DropdownContext = _interopRequireDefault(require("./DropdownContext")); var _InputGroupContext = _interopRequireDefault(require("./InputGroupContext")); var _NavbarContext = _interopRequireDefault(require("./NavbarContext")); var _ThemeProvider = require("./ThemeProvider"); var _useWrappedRefWithWarning = _interopRequireDefault(require("./useWrappedRefWithWarning")); var _types = require("./types"); var _jsxRuntime = require("react/jsx-runtime"); function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; } const defaultProps = { flip: true }; function getDropdownMenuPlacement(alignEnd, dropDirection, isRTL) { const topStart = isRTL ? 'top-end' : 'top-start'; const topEnd = isRTL ? 'top-start' : 'top-end'; const bottomStart = isRTL ? 'bottom-end' : 'bottom-start'; const bottomEnd = isRTL ? 'bottom-start' : 'bottom-end'; const leftStart = isRTL ? 'right-start' : 'left-start'; const leftEnd = isRTL ? 'right-end' : 'left-end'; const rightStart = isRTL ? 'left-start' : 'right-start'; const rightEnd = isRTL ? 'left-end' : 'right-end'; let placement = alignEnd ? bottomEnd : bottomStart; if (dropDirection === 'up') placement = alignEnd ? topEnd : topStart;else if (dropDirection === 'end') placement = alignEnd ? rightEnd : rightStart;else if (dropDirection === 'start') placement = alignEnd ? leftEnd : leftStart; return placement; } const DropdownMenu = /*#__PURE__*/React.forwardRef(({ bsPrefix, className, align, rootCloseEvent, flip, show: showProps, renderOnMount, // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595 as: Component = 'div', popperConfig, variant, ...props }, ref) => { let alignEnd = false; const isNavbar = (0, React.useContext)(_NavbarContext.default); const prefix = (0, _ThemeProvider.useBootstrapPrefix)(bsPrefix, 'dropdown-menu'); const { align: contextAlign, drop, isRTL } = (0, React.useContext)(_DropdownContext.default); align = align || contextAlign; const isInputGroup = (0, React.useContext)(_InputGroupContext.default); const alignClasses = []; if (align) { if (typeof align === 'object') { const keys = Object.keys(align); process.env.NODE_ENV !== "production" ? (0, _warning.default)(keys.length === 1, 'There should only be 1 breakpoint when passing an object to `align`') : void 0; if (keys.length) { const brkPoint = keys[0]; const direction = align[brkPoint]; // .dropdown-menu-end is required for responsively aligning // left in addition to align left classes. alignEnd = direction === 'start'; alignClasses.push(`${prefix}-${brkPoint}-${direction}`); } } else if (align === 'end') { alignEnd = true; } } const placement = getDropdownMenuPlacement(alignEnd, drop, isRTL); const [menuProps, { hasShown, popper, show, toggle }] = (0, _DropdownMenu.useDropdownMenu)({ flip, rootCloseEvent, show: showProps, usePopper: !isNavbar && alignClasses.length === 0, offset: [0, 2], popperConfig, placement }); menuProps.ref = (0, _useMergedRefs.default)((0, _useWrappedRefWithWarning.default)(ref, 'DropdownMenu'), menuProps.ref); (0, _useIsomorphicEffect.default)(() => { // Popper's initial position for the menu is incorrect when // renderOnMount=true. Need to call update() to correct it. if (show) popper == null ? void 0 : popper.update(); }, [show]); if (!hasShown && !renderOnMount && !isInputGroup) return null; // For custom components provide additional, non-DOM, props; if (typeof Component !== 'string') { menuProps.show = show; menuProps.close = () => toggle == null ? void 0 : toggle(false); menuProps.align = align; } let style = props.style; if (popper != null && popper.placement) { // we don't need the default popper style, // menus are display: none when not shown. style = { ...props.style, ...menuProps.style }; props['x-placement'] = popper.placement; } return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, { ...props, ...menuProps, style: style // Bootstrap css requires this data attrib to style responsive menus. , ...((alignClasses.length || isNavbar) && { 'data-bs-popper': 'static' }), className: (0, _classnames.default)(className, prefix, show && 'show', alignEnd && `${prefix}-end`, variant && `${prefix}-${variant}`, ...alignClasses) }); }); DropdownMenu.displayName = 'DropdownMenu'; DropdownMenu.defaultProps = defaultProps; var _default = DropdownMenu; exports.default = _default;