@kubit-ui-web/react-components
Version:
Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience
53 lines • 2.3 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.shift = void 0;
const detectOverflow_1 = require("../utils/detectOverflow");
const getCrossAxis_1 = require("../utils/getCrossAxis");
const getMainAxisFromPlacement_1 = require("../utils/getMainAxisFromPlacement");
const within_1 = require("../utils/within");
/**
* Optimizes the visibility of the floating element by shifting it in order to
* keep it in view when it will overflow the clipping boundary.
*/
const shift = (options = {}) => ({
name: 'shift',
options,
fn(state) {
const { x, y, placement } = state;
const { mainAxis: checkMainAxis = true, crossAxis: checkCrossAxis = false, limiter = { fn: ({ x, y }) => ({ x, y }) }, ...detectOverflowOptions } = options;
const coords = { x, y };
const overflow = (0, detectOverflow_1.detectOverflow)(state, detectOverflowOptions);
const mainAxis = (0, getMainAxisFromPlacement_1.getMainAxisFromPlacement)(placement);
const crossAxis = (0, getCrossAxis_1.getCrossAxis)(mainAxis);
let mainAxisCoord = coords[mainAxis];
let crossAxisCoord = coords[crossAxis];
if (checkMainAxis) {
const minSide = mainAxis === 'y' ? 'top' : 'left';
const maxSide = mainAxis === 'y' ? 'bottom' : 'right';
const min = mainAxisCoord + overflow[minSide];
const max = mainAxisCoord - overflow[maxSide];
mainAxisCoord = (0, within_1.within)(min, mainAxisCoord, max);
}
if (checkCrossAxis) {
const minSide = crossAxis === 'y' ? 'top' : 'left';
const maxSide = crossAxis === 'y' ? 'bottom' : 'right';
const min = crossAxisCoord + overflow[minSide];
const max = crossAxisCoord - overflow[maxSide];
crossAxisCoord = (0, within_1.within)(min, crossAxisCoord, max);
}
const limitedCoords = limiter.fn({
...state,
[mainAxis]: mainAxisCoord,
[crossAxis]: crossAxisCoord,
});
return {
...limitedCoords,
data: {
x: limitedCoords.x - x,
y: limitedCoords.y - y,
},
};
},
});
exports.shift = shift;
//# sourceMappingURL=shift.js.map