"use strict"; var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default; Object.defineProperty(exports, "__esModule", { value: true }); exports.prepareComponentToken = exports.default = void 0; var _style = require("../../style"); var _motion = require("../../style/motion"); var _placementArrow = _interopRequireWildcard(require("../../style/placementArrow")); var _roundedArrow = require("../../style/roundedArrow"); var _internal = require("../../theme/internal"); const genBaseStyle = token => { const { componentCls, popoverColor, titleMinWidth, fontWeightStrong, innerPadding, boxShadowSecondary, colorTextHeading, borderRadiusLG, zIndexPopup, titleMarginBottom, colorBgElevated, popoverBg, titleBorderBottom, innerContentPadding, titlePadding } = token; return [{ [componentCls]: Object.assign(Object.assign({}, (0, _style.resetComponent)(token)), { position: 'absolute', top: 0, // use `left` to fix https://github.com/ant-design/ant-design/issues/39195 left: { _skip_check_: true, value: 0 }, zIndex: zIndexPopup, fontWeight: 'normal', whiteSpace: 'normal', textAlign: 'start', cursor: 'auto', userSelect: 'text', // When use `autoArrow`, origin will follow the arrow position '--valid-offset-x': 'var(--arrow-offset-horizontal, var(--arrow-x))', transformOrigin: [`var(--valid-offset-x, 50%)`, `var(--arrow-y, 50%)`].join(' '), '--antd-arrow-background-color': colorBgElevated, width: 'max-content', maxWidth: '100vw', '&-rtl': { direction: 'rtl' }, '&-hidden': { display: 'none' }, [`${componentCls}-content`]: { position: 'relative' }, [`${componentCls}-inner`]: { backgroundColor: popoverBg, backgroundClip: 'padding-box', borderRadius: borderRadiusLG, boxShadow: boxShadowSecondary, padding: innerPadding }, [`${componentCls}-title`]: { minWidth: titleMinWidth, marginBottom: titleMarginBottom, color: colorTextHeading, fontWeight: fontWeightStrong, borderBottom: titleBorderBottom, padding: titlePadding }, [`${componentCls}-inner-content`]: { color: popoverColor, padding: innerContentPadding } }) }, // Arrow Style (0, _placementArrow.default)(token, 'var(--antd-arrow-background-color)'), // Pure Render { [`${componentCls}-pure`]: { position: 'relative', maxWidth: 'none', margin: token.sizePopupArrow, display: 'inline-block', [`${componentCls}-content`]: { display: 'inline-block' } } }]; }; const genColorStyle = token => { const { componentCls } = token; return { [componentCls]: _internal.PresetColors.map(colorKey => { const lightColor = token[`${colorKey}6`]; return { [`&${componentCls}-${colorKey}`]: { '--antd-arrow-background-color': lightColor, [`${componentCls}-inner`]: { backgroundColor: lightColor }, [`${componentCls}-arrow`]: { background: 'transparent' } } }; }) }; }; const prepareComponentToken = token => { const { lineWidth, controlHeight, fontHeight, padding, wireframe, zIndexPopupBase, borderRadiusLG, marginXS, lineType, colorSplit, paddingSM } = token; const titlePaddingBlockDist = controlHeight - fontHeight; const popoverTitlePaddingBlockTop = titlePaddingBlockDist / 2; const popoverTitlePaddingBlockBottom = titlePaddingBlockDist / 2 - lineWidth; const popoverPaddingHorizontal = padding; return Object.assign(Object.assign(Object.assign({ titleMinWidth: 177, zIndexPopup: zIndexPopupBase + 30 }, (0, _roundedArrow.getArrowToken)(token)), (0, _placementArrow.getArrowOffsetToken)({ contentRadius: borderRadiusLG, limitVerticalRadius: true })), { // internal innerPadding: wireframe ? 0 : 12, titleMarginBottom: wireframe ? 0 : marginXS, titlePadding: wireframe ? `${popoverTitlePaddingBlockTop}px ${popoverPaddingHorizontal}px ${popoverTitlePaddingBlockBottom}px` : 0, titleBorderBottom: wireframe ? `${lineWidth}px ${lineType} ${colorSplit}` : 'none', innerContentPadding: wireframe ? `${paddingSM}px ${popoverPaddingHorizontal}px` : 0 }); }; exports.prepareComponentToken = prepareComponentToken; var _default = exports.default = (0, _internal.genStyleHooks)('Popover', token => { const { colorBgElevated, colorText } = token; const popoverToken = (0, _internal.mergeToken)(token, { popoverBg: colorBgElevated, popoverColor: colorText }); return [genBaseStyle(popoverToken), genColorStyle(popoverToken), (0, _motion.initZoomMotion)(popoverToken, 'zoom-big')]; }, prepareComponentToken, { resetStyle: false, deprecatedTokens: [['width', 'titleMinWidth'], ['minWidth', 'titleMinWidth']] });