"use strict"; "use client"; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default; Object.defineProperty(exports, "__esModule", { value: true }); exports.default = void 0; var _style = require("../../style"); var _motion = require("../../style/motion"); var _placementArrow = _interopRequireDefault(require("../../style/placementArrow")); var _internal = require("../../theme/internal"); const genBaseStyle = token => { const { componentCls, popoverColor, minWidth, fontWeightStrong, popoverPadding, boxShadowSecondary, colorTextHeading, borderRadiusLG: borderRadius, zIndexPopup, marginXS, colorBgElevated, popoverBg } = 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', transformOrigin: `var(--arrow-x, 50%) var(--arrow-y, 50%)`, '--antd-arrow-background-color': colorBgElevated, '&-rtl': { direction: 'rtl' }, '&-hidden': { display: 'none' }, [`${componentCls}-content`]: { position: 'relative' }, [`${componentCls}-inner`]: { backgroundColor: popoverBg, backgroundClip: 'padding-box', borderRadius, boxShadow: boxShadowSecondary, padding: popoverPadding }, [`${componentCls}-title`]: { minWidth, marginBottom: marginXS, color: colorTextHeading, fontWeight: fontWeightStrong }, [`${componentCls}-inner-content`]: { color: popoverColor } }) }, // Arrow Style (0, _placementArrow.default)(token, { colorBg: '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 genWireframeStyle = token => { const { componentCls, lineWidth, lineType, colorSplit, paddingSM, controlHeight, fontSize, lineHeight, padding } = token; const titlePaddingBlockDist = controlHeight - Math.round(fontSize * lineHeight); const popoverTitlePaddingBlockTop = titlePaddingBlockDist / 2; const popoverTitlePaddingBlockBottom = titlePaddingBlockDist / 2 - lineWidth; const popoverPaddingHorizontal = padding; return { [componentCls]: { [`${componentCls}-inner`]: { padding: 0 }, [`${componentCls}-title`]: { margin: 0, padding: `${popoverTitlePaddingBlockTop}px ${popoverPaddingHorizontal}px ${popoverTitlePaddingBlockBottom}px`, borderBottom: `${lineWidth}px ${lineType} ${colorSplit}` }, [`${componentCls}-inner-content`]: { padding: `${paddingSM}px ${popoverPaddingHorizontal}px` } } }; }; var _default = exports.default = (0, _internal.genComponentStyleHook)('Popover', token => { const { colorBgElevated, colorText, wireframe } = token; const popoverToken = (0, _internal.mergeToken)(token, { popoverPadding: 12, popoverBg: colorBgElevated, popoverColor: colorText }); return [genBaseStyle(popoverToken), genColorStyle(popoverToken), wireframe && genWireframeStyle(popoverToken), (0, _motion.initZoomMotion)(popoverToken, 'zoom-big')]; }, token => ({ width: 177, minWidth: 177, zIndexPopup: token.zIndexPopupBase + 30 }), { resetStyle: false, deprecatedTokens: [['width', 'minWidth']] });