@wordpress/components
Version:
UI components for WordPress.
230 lines (228 loc) • 6.91 kB
JavaScript
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// packages/components/src/popover/utils.ts
var utils_exports = {};
__export(utils_exports, {
computePopoverPosition: () => computePopoverPosition,
getReferenceElement: () => getReferenceElement,
placementToMotionAnimationProps: () => placementToMotionAnimationProps,
positionToPlacement: () => positionToPlacement
});
module.exports = __toCommonJS(utils_exports);
var POSITION_TO_PLACEMENT = {
bottom: "bottom",
top: "top",
"middle left": "left",
"middle right": "right",
"bottom left": "bottom-end",
"bottom center": "bottom",
"bottom right": "bottom-start",
"top left": "top-end",
"top center": "top",
"top right": "top-start",
"middle left left": "left",
"middle left right": "left",
"middle left bottom": "left-end",
"middle left top": "left-start",
"middle right left": "right",
"middle right right": "right",
"middle right bottom": "right-end",
"middle right top": "right-start",
"bottom left left": "bottom-end",
"bottom left right": "bottom-end",
"bottom left bottom": "bottom-end",
"bottom left top": "bottom-end",
"bottom center left": "bottom",
"bottom center right": "bottom",
"bottom center bottom": "bottom",
"bottom center top": "bottom",
"bottom right left": "bottom-start",
"bottom right right": "bottom-start",
"bottom right bottom": "bottom-start",
"bottom right top": "bottom-start",
"top left left": "top-end",
"top left right": "top-end",
"top left bottom": "top-end",
"top left top": "top-end",
"top center left": "top",
"top center right": "top",
"top center bottom": "top",
"top center top": "top",
"top right left": "top-start",
"top right right": "top-start",
"top right bottom": "top-start",
"top right top": "top-start",
// `middle`/`middle center [corner?]` positions are associated to a fallback
// `bottom` placement because there aren't any corresponding placement values.
middle: "bottom",
"middle center": "bottom",
"middle center bottom": "bottom",
"middle center left": "bottom",
"middle center right": "bottom",
"middle center top": "bottom"
};
var positionToPlacement = (position) => {
var _POSITION_TO_PLACEMEN;
return (_POSITION_TO_PLACEMEN = POSITION_TO_PLACEMENT[position]) !== null && _POSITION_TO_PLACEMEN !== void 0 ? _POSITION_TO_PLACEMEN : "bottom";
};
var PLACEMENT_TO_ANIMATION_ORIGIN = {
top: {
originX: 0.5,
originY: 1
},
// open from bottom, center
"top-start": {
originX: 0,
originY: 1
},
// open from bottom, left
"top-end": {
originX: 1,
originY: 1
},
// open from bottom, right
right: {
originX: 0,
originY: 0.5
},
// open from middle, left
"right-start": {
originX: 0,
originY: 0
},
// open from top, left
"right-end": {
originX: 0,
originY: 1
},
// open from bottom, left
bottom: {
originX: 0.5,
originY: 0
},
// open from top, center
"bottom-start": {
originX: 0,
originY: 0
},
// open from top, left
"bottom-end": {
originX: 1,
originY: 0
},
// open from top, right
left: {
originX: 1,
originY: 0.5
},
// open from middle, right
"left-start": {
originX: 1,
originY: 0
},
// open from top, right
"left-end": {
originX: 1,
originY: 1
},
// open from bottom, right
overlay: {
originX: 0.5,
originY: 0.5
}
// open from center, center
};
var placementToMotionAnimationProps = (placement) => {
const translateProp = placement.startsWith("top") || placement.startsWith("bottom") ? "translateY" : "translateX";
const translateDirection = placement.startsWith("top") || placement.startsWith("left") ? 1 : -1;
return {
style: PLACEMENT_TO_ANIMATION_ORIGIN[placement],
initial: {
opacity: 0,
scale: 0,
[translateProp]: `${2 * translateDirection}em`
},
animate: {
opacity: 1,
scale: 1,
[translateProp]: 0
},
transition: {
duration: 0.1,
ease: [0, 0, 0.2, 1]
}
};
};
function isTopBottom(anchorRef) {
return !!anchorRef?.top;
}
function isRef(anchorRef) {
return !!anchorRef?.current;
}
var getReferenceElement = ({
anchor,
anchorRef,
anchorRect,
getAnchorRect,
fallbackReferenceElement
}) => {
var _referenceElement;
let referenceElement = null;
if (anchor) {
referenceElement = anchor;
} else if (isTopBottom(anchorRef)) {
referenceElement = {
getBoundingClientRect() {
const topRect = anchorRef.top.getBoundingClientRect();
const bottomRect = anchorRef.bottom.getBoundingClientRect();
return new window.DOMRect(topRect.x, topRect.y, topRect.width, bottomRect.bottom - topRect.top);
}
};
} else if (isRef(anchorRef)) {
referenceElement = anchorRef.current;
} else if (anchorRef) {
referenceElement = anchorRef;
} else if (anchorRect) {
referenceElement = {
getBoundingClientRect() {
return anchorRect;
}
};
} else if (getAnchorRect) {
referenceElement = {
getBoundingClientRect() {
var _rect$x, _rect$y, _rect$width, _rect$height;
const rect = getAnchorRect(fallbackReferenceElement);
return new window.DOMRect((_rect$x = rect.x) !== null && _rect$x !== void 0 ? _rect$x : rect.left, (_rect$y = rect.y) !== null && _rect$y !== void 0 ? _rect$y : rect.top, (_rect$width = rect.width) !== null && _rect$width !== void 0 ? _rect$width : rect.right - rect.left, (_rect$height = rect.height) !== null && _rect$height !== void 0 ? _rect$height : rect.bottom - rect.top);
}
};
} else if (fallbackReferenceElement) {
referenceElement = fallbackReferenceElement.parentElement;
}
return (_referenceElement = referenceElement) !== null && _referenceElement !== void 0 ? _referenceElement : null;
};
var computePopoverPosition = (c) => c === null || Number.isNaN(c) ? void 0 : Math.round(c);
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
computePopoverPosition,
getReferenceElement,
placementToMotionAnimationProps,
positionToPlacement
});
//# sourceMappingURL=utils.js.map