@helpwave/hightide
Version:
helpwave's component and theming library
57 lines • 1.5 kB
JavaScript
// src/hooks/usePopoverPosition.ts
var defaultPopoverPositionOptions = {
edgePadding: 16,
outerGap: 4,
horizontalAlignment: "leftInside",
verticalAlignment: "bottomOutside",
disabled: false
};
var usePopoverPosition = (trigger, options) => {
const {
edgePadding,
outerGap,
verticalAlignment,
horizontalAlignment,
disabled
} = { ...defaultPopoverPositionOptions, ...options };
if (disabled || !trigger) {
return {};
}
const left = {
leftOutside: trigger.left - outerGap,
leftInside: trigger.left,
rightOutside: trigger.right + outerGap,
rightInside: trigger.right,
center: trigger.left + trigger.width / 2
}[horizontalAlignment];
const top = {
topOutside: trigger.top - outerGap,
topInside: trigger.top,
bottomOutside: trigger.bottom + outerGap,
bottomInside: trigger.bottom,
center: trigger.top + trigger.height / 2
}[verticalAlignment];
const translateX = {
leftOutside: "-100%",
leftInside: void 0,
rightOutside: void 0,
rightInside: "-100%",
center: "-50%"
}[horizontalAlignment];
const translateY = {
topOutside: "-100%",
topInside: void 0,
bottomOutside: void 0,
bottomInside: "-100%",
center: "-50%"
}[verticalAlignment];
return {
left: Math.max(left, edgePadding),
top: Math.max(top, edgePadding),
translate: [translateX ?? "0", translateY ?? "0"].join(" ")
};
};
export {
usePopoverPosition
};
//# sourceMappingURL=usePopoverPosition.mjs.map