@nex-ui/react/dist/esm/components/utils/computePosition/middleware/offset.mjs

🎉 A beautiful, modern, and reliable React component library.

import { getSide, getAlignment, getSideAxis, getAlignmentAxis } from '../utils.mjs';

const offset = (options = 5)=>{
    const offsetValue = typeof options === 'number' ? {
        mainAxis: options,
        crossAxis: 0
    } : {
        mainAxis: options.mainAxis ?? 0,
        crossAxis: options.crossAxis ?? 0
    };
    return {
        name: 'offset',
        fn: (state)=>{
            const { placement, rects, middlewareData } = state;
            const minOffset = middlewareData.arrow?.minOffset ?? 0;
            const side = getSide(placement);
            const alignment = getAlignment(placement);
            const mainAxis = getSideAxis(placement);
            const crossAxis = getAlignmentAxis(placement);
            const mainAxisFactor = [
                'left',
                'top'
            ].includes(side) ? -1 : 1;
            const crossAxisFactor = alignment === 'end' ? -1 : 1;
            const mainAxisOffset = Math.max(offsetValue.mainAxis, minOffset);
            const crossAxisOffset = offsetValue.crossAxis;
            const coordinates = {
                [mainAxis]: rects.popper[mainAxis] + mainAxisOffset * mainAxisFactor,
                [crossAxis]: rects.popper[crossAxis] + crossAxisOffset * crossAxisFactor
            };
            return {
                ...coordinates,
                data: {
                    x: coordinates.x - rects.popper.x,
                    y: coordinates.y - rects.popper.y
                }
            };
        }
    };
};

export { offset };