@trail-ui/react
Version:
261 lines (258 loc) • 9.86 kB
JavaScript
;
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/overlay/index.ts
var overlay_exports = {};
__export(overlay_exports, {
Overlay: () => Overlay,
Positions: () => Positions
});
module.exports = __toCommonJS(overlay_exports);
// src/overlay/overlay.tsx
var import_react = __toESM(require("react"));
var import_react2 = require("react");
var import_jsx_runtime = require("react/jsx-runtime");
var Positions = {
top: "top",
topLeft: "topLeft",
topRight: "topRight",
bottom: "bottom",
bottomLeft: "bottomLeft",
bottomRight: "bottomRight",
left: "left",
leftTop: "leftTop",
leftBottom: "leftBottom",
right: "right",
rightTop: "rightTop",
rightBottom: "rightBottom"
};
function Overlay(props) {
var _a, _b, _c;
const [style, setStyle] = (0, import_react2.useState)({
top: 0,
left: 0,
transform: "",
position: "fixed"
});
const elementRef = (0, import_react2.useRef)(null);
const getMaxHeight = () => {
var _a2, _b2, _c2, _d, _e, _f, _g, _h;
const refEl = props.referenceElement.current;
if (!refEl) {
return;
}
const refRect = refEl.getBoundingClientRect();
let maxAvailableHeight = 0;
const windowHeight = window.innerHeight;
switch (props.position) {
case Positions.bottom:
case Positions.bottomLeft:
case Positions.bottomRight:
maxAvailableHeight = windowHeight - refRect.bottom - (((_a2 = props.offset) == null ? void 0 : _a2.y) || 0) * 2;
break;
case Positions.top:
case Positions.topLeft:
case Positions.topRight:
maxAvailableHeight = refRect.top - (((_b2 = props.offset) == null ? void 0 : _b2.y) || 0) * 2;
break;
default:
maxAvailableHeight = Math.min(
windowHeight - (((_c2 = props.offset) == null ? void 0 : _c2.y) || 0) * 2,
((_d = props.style) == null ? void 0 : _d.maxHeight) || Number.POSITIVE_INFINITY,
((_e = props.style) == null ? void 0 : _e.height) || Number.POSITIVE_INFINITY
);
}
if ((_f = props.style) == null ? void 0 : _f.maxHeight) {
maxAvailableHeight = maxAvailableHeight < ((_g = props.style) == null ? void 0 : _g.maxHeight) ? maxAvailableHeight : (_h = props.style) == null ? void 0 : _h.maxHeight;
}
return maxAvailableHeight;
};
const getMaxWidth = () => {
var _a2, _b2, _c2, _d, _e, _f, _g, _h;
const refEl = props.referenceElement.current;
const currentEl = elementRef.current;
if (!refEl || !currentEl) {
return;
}
const refRect = refEl.getBoundingClientRect();
let maxAvailableWidth = 0;
const windowWidth = window.innerWidth;
switch (props.position) {
case Positions.right:
case Positions.rightBottom:
case Positions.rightTop:
maxAvailableWidth = windowWidth - refRect.right - (((_a2 = props.offset) == null ? void 0 : _a2.x) || 0) * 2;
break;
case Positions.left:
case Positions.leftBottom:
case Positions.leftTop:
maxAvailableWidth = refRect.left - (((_b2 = props.offset) == null ? void 0 : _b2.x) || 0) * 2;
break;
default:
maxAvailableWidth = Math.min(
windowWidth - (((_c2 = props.offset) == null ? void 0 : _c2.x) || 0) * 2,
((_d = props.style) == null ? void 0 : _d.width) || Number.POSITIVE_INFINITY,
((_e = props.style) == null ? void 0 : _e.maxWidth) || Number.POSITIVE_INFINITY
);
}
if ((_f = props.style) == null ? void 0 : _f.maxWidth) {
maxAvailableWidth = maxAvailableWidth < ((_g = props.style) == null ? void 0 : _g.maxWidth) ? maxAvailableWidth : (_h = props.style) == null ? void 0 : _h.maxWidth;
}
return maxAvailableWidth;
};
const getUpdatedPositions = () => {
var _a2, _b2, _c2, _d, _e, _f, _g, _h, _i, _j, _k, _l;
const refEl = props.referenceElement.current;
if (!refEl) {
return;
}
const refRect = refEl.getBoundingClientRect();
let top = 0;
let left = 0;
let transform = "";
switch (props.position) {
case Positions.top:
top = refRect.top - (((_a2 = props.offset) == null ? void 0 : _a2.y) || 0);
left = refRect.left + refRect.width / 2;
transform = "translate(-50%, -100%)";
break;
case Positions.topLeft:
top = refRect.top - (((_b2 = props.offset) == null ? void 0 : _b2.y) || 0);
left = refRect.left;
transform = "translateY(-100%)";
break;
case Positions.topRight:
top = refRect.top - (((_c2 = props.offset) == null ? void 0 : _c2.y) || 0);
left = refRect.right;
transform = "translate(-100%, -100%)";
break;
case Positions.bottom:
top = refRect.bottom + (((_d = props.offset) == null ? void 0 : _d.y) || 0);
left = refRect.left + refRect.width / 2;
transform = "translateX(-50%)";
break;
case Positions.bottomLeft:
top = refRect.bottom + (((_e = props.offset) == null ? void 0 : _e.y) || 0);
left = refRect.left;
break;
case Positions.bottomRight:
top = refRect.bottom + (((_f = props.offset) == null ? void 0 : _f.y) || 0);
left = refRect.right;
transform = "translateX(-100%)";
break;
case Positions.left:
top = refRect.top + refRect.height / 2;
left = refRect.left - (((_g = props.offset) == null ? void 0 : _g.x) || 0);
transform = "translate(-100%,-50%)";
break;
case Positions.leftTop:
top = refRect.top;
left = refRect.left - (((_h = props.offset) == null ? void 0 : _h.x) || 0);
transform = "translateX(-100%)";
break;
case Positions.leftBottom:
top = refRect.bottom;
left = refRect.left - (((_i = props.offset) == null ? void 0 : _i.x) || 0);
transform = "translate(-100%, -100%)";
break;
case Positions.right:
top = refRect.top + refRect.height / 2;
left = refRect.right + (((_j = props.offset) == null ? void 0 : _j.x) || 0);
transform = "translateY(-50%)";
break;
case Positions.rightTop:
top = refRect.top;
left = refRect.right + (((_k = props.offset) == null ? void 0 : _k.x) || 0);
break;
case Positions.rightBottom:
top = refRect.bottom;
left = refRect.right + (((_l = props.offset) == null ? void 0 : _l.x) || 0);
transform = "translateY(-100%)";
break;
}
const maxHeight = getMaxHeight();
const maxWidth = getMaxWidth();
setStyle((prevState) => ({
...prevState,
top,
left,
transform,
...maxHeight && { maxHeight },
...maxWidth && { maxWidth }
}));
};
(0, import_react2.useLayoutEffect)(() => {
if (!props.referenceElement.current) {
return;
}
getUpdatedPositions();
const updatePositions = () => getUpdatedPositions();
window.addEventListener("resize", updatePositions);
window.addEventListener("scroll", updatePositions, true);
return () => {
window.removeEventListener("resize", updatePositions);
window.removeEventListener("scroll", updatePositions, true);
};
}, [props.referenceElement.current]);
if ((0, import_react2.isValidElement)(props.children)) {
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
props.onOverlayClick && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"div",
{
role: "button",
className: "z-2 fixed left-[0] top-[0] h-[100vh] w-[100vw]",
onClick: props.onOverlayClick,
onKeyDown: props.onOverlayClick,
"aria-label": "Close dropdown",
tabIndex: -1
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"div",
{
style: {
...style,
overflow: "auto",
width: ((_a = props.style) == null ? void 0 : _a.width) || ((_b = props.referenceElement.current) == null ? void 0 : _b.getBoundingClientRect().width),
height: ((_c = props.style) == null ? void 0 : _c.height) || "fit-content",
zIndex: 30
},
className: "rounded-md border-[1px] bg-neutral-50 shadow-md",
children: import_react.default.cloneElement(props.children, { ref: elementRef })
}
)
] });
} else {
return props.children;
}
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
Overlay,
Positions
});