408 lines
11 KiB
JavaScript
408 lines
11 KiB
JavaScript
'use client'
|
|
"use strict";
|
|
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);
|
|
|
|
// src/index.ts
|
|
var src_exports = {};
|
|
__export(src_exports, {
|
|
popperCSSVars: () => cssVars,
|
|
usePopper: () => usePopper
|
|
});
|
|
module.exports = __toCommonJS(src_exports);
|
|
|
|
// src/use-popper.ts
|
|
var import_react_use_merge_refs = require("@chakra-ui/react-use-merge-refs");
|
|
var import_core = require("@popperjs/core");
|
|
var import_react = require("react");
|
|
|
|
// src/utils.ts
|
|
var toVar = (value, fallback) => ({
|
|
var: value,
|
|
varRef: fallback ? `var(${value}, ${fallback})` : `var(${value})`
|
|
});
|
|
var cssVars = {
|
|
arrowShadowColor: toVar("--popper-arrow-shadow-color"),
|
|
arrowSize: toVar("--popper-arrow-size", "8px"),
|
|
arrowSizeHalf: toVar("--popper-arrow-size-half"),
|
|
arrowBg: toVar("--popper-arrow-bg"),
|
|
transformOrigin: toVar("--popper-transform-origin"),
|
|
arrowOffset: toVar("--popper-arrow-offset")
|
|
};
|
|
function getBoxShadow(placement) {
|
|
if (placement.includes("top"))
|
|
return `1px 1px 0px 0 var(--popper-arrow-shadow-color)`;
|
|
if (placement.includes("bottom"))
|
|
return `-1px -1px 0px 0 var(--popper-arrow-shadow-color)`;
|
|
if (placement.includes("right"))
|
|
return `-1px 1px 0px 0 var(--popper-arrow-shadow-color)`;
|
|
if (placement.includes("left"))
|
|
return `1px -1px 0px 0 var(--popper-arrow-shadow-color)`;
|
|
}
|
|
var transforms = {
|
|
top: "bottom center",
|
|
"top-start": "bottom left",
|
|
"top-end": "bottom right",
|
|
bottom: "top center",
|
|
"bottom-start": "top left",
|
|
"bottom-end": "top right",
|
|
left: "right center",
|
|
"left-start": "right top",
|
|
"left-end": "right bottom",
|
|
right: "left center",
|
|
"right-start": "left top",
|
|
"right-end": "left bottom"
|
|
};
|
|
var toTransformOrigin = (placement) => transforms[placement];
|
|
var defaultEventListeners = {
|
|
scroll: true,
|
|
resize: true
|
|
};
|
|
function getEventListenerOptions(value) {
|
|
let eventListeners;
|
|
if (typeof value === "object") {
|
|
eventListeners = {
|
|
enabled: true,
|
|
options: { ...defaultEventListeners, ...value }
|
|
};
|
|
} else {
|
|
eventListeners = {
|
|
enabled: value,
|
|
options: defaultEventListeners
|
|
};
|
|
}
|
|
return eventListeners;
|
|
}
|
|
|
|
// src/modifiers.ts
|
|
var matchWidth = {
|
|
name: "matchWidth",
|
|
enabled: true,
|
|
phase: "beforeWrite",
|
|
requires: ["computeStyles"],
|
|
fn: ({ state }) => {
|
|
state.styles.popper.width = `${state.rects.reference.width}px`;
|
|
},
|
|
effect: ({ state }) => () => {
|
|
const reference = state.elements.reference;
|
|
state.elements.popper.style.width = `${reference.offsetWidth}px`;
|
|
}
|
|
};
|
|
var transformOrigin = {
|
|
name: "transformOrigin",
|
|
enabled: true,
|
|
phase: "write",
|
|
fn: ({ state }) => {
|
|
setTransformOrigin(state);
|
|
},
|
|
effect: ({ state }) => () => {
|
|
setTransformOrigin(state);
|
|
}
|
|
};
|
|
var setTransformOrigin = (state) => {
|
|
state.elements.popper.style.setProperty(
|
|
cssVars.transformOrigin.var,
|
|
toTransformOrigin(state.placement)
|
|
);
|
|
};
|
|
var positionArrow = {
|
|
name: "positionArrow",
|
|
enabled: true,
|
|
phase: "afterWrite",
|
|
fn: ({ state }) => {
|
|
setArrowStyles(state);
|
|
}
|
|
};
|
|
var setArrowStyles = (state) => {
|
|
var _a;
|
|
if (!state.placement)
|
|
return;
|
|
const overrides = getArrowStyle(state.placement);
|
|
if (((_a = state.elements) == null ? void 0 : _a.arrow) && overrides) {
|
|
Object.assign(state.elements.arrow.style, {
|
|
[overrides.property]: overrides.value,
|
|
width: cssVars.arrowSize.varRef,
|
|
height: cssVars.arrowSize.varRef,
|
|
zIndex: -1
|
|
});
|
|
const vars = {
|
|
[cssVars.arrowSizeHalf.var]: `calc(${cssVars.arrowSize.varRef} / 2 - 1px)`,
|
|
[cssVars.arrowOffset.var]: `calc(${cssVars.arrowSizeHalf.varRef} * -1)`
|
|
};
|
|
for (const property in vars) {
|
|
state.elements.arrow.style.setProperty(property, vars[property]);
|
|
}
|
|
}
|
|
};
|
|
var getArrowStyle = (placement) => {
|
|
if (placement.startsWith("top")) {
|
|
return { property: "bottom", value: cssVars.arrowOffset.varRef };
|
|
}
|
|
if (placement.startsWith("bottom")) {
|
|
return { property: "top", value: cssVars.arrowOffset.varRef };
|
|
}
|
|
if (placement.startsWith("left")) {
|
|
return { property: "right", value: cssVars.arrowOffset.varRef };
|
|
}
|
|
if (placement.startsWith("right")) {
|
|
return { property: "left", value: cssVars.arrowOffset.varRef };
|
|
}
|
|
};
|
|
var innerArrow = {
|
|
name: "innerArrow",
|
|
enabled: true,
|
|
phase: "main",
|
|
requires: ["arrow"],
|
|
fn: ({ state }) => {
|
|
setInnerArrowStyles(state);
|
|
},
|
|
effect: ({ state }) => () => {
|
|
setInnerArrowStyles(state);
|
|
}
|
|
};
|
|
var setInnerArrowStyles = (state) => {
|
|
if (!state.elements.arrow)
|
|
return;
|
|
const inner = state.elements.arrow.querySelector(
|
|
"[data-popper-arrow-inner]"
|
|
);
|
|
if (!inner)
|
|
return;
|
|
const boxShadow = getBoxShadow(state.placement);
|
|
if (boxShadow) {
|
|
inner.style.setProperty("--popper-arrow-default-shadow", boxShadow);
|
|
}
|
|
Object.assign(inner.style, {
|
|
transform: "rotate(45deg)",
|
|
background: cssVars.arrowBg.varRef,
|
|
top: 0,
|
|
left: 0,
|
|
width: "100%",
|
|
height: "100%",
|
|
position: "absolute",
|
|
zIndex: "inherit",
|
|
boxShadow: `var(--popper-arrow-shadow, var(--popper-arrow-default-shadow))`
|
|
});
|
|
};
|
|
|
|
// src/popper.placement.ts
|
|
var logicals = {
|
|
"start-start": { ltr: "left-start", rtl: "right-start" },
|
|
"start-end": { ltr: "left-end", rtl: "right-end" },
|
|
"end-start": { ltr: "right-start", rtl: "left-start" },
|
|
"end-end": { ltr: "right-end", rtl: "left-end" },
|
|
start: { ltr: "left", rtl: "right" },
|
|
end: { ltr: "right", rtl: "left" }
|
|
};
|
|
var opposites = {
|
|
"auto-start": "auto-end",
|
|
"auto-end": "auto-start",
|
|
"top-start": "top-end",
|
|
"top-end": "top-start",
|
|
"bottom-start": "bottom-end",
|
|
"bottom-end": "bottom-start"
|
|
};
|
|
function getPopperPlacement(placement, dir = "ltr") {
|
|
var _a, _b;
|
|
const value = ((_a = logicals[placement]) == null ? void 0 : _a[dir]) || placement;
|
|
if (dir === "ltr")
|
|
return value;
|
|
return (_b = opposites[placement]) != null ? _b : value;
|
|
}
|
|
|
|
// src/use-popper.ts
|
|
function usePopper(props = {}) {
|
|
const {
|
|
enabled = true,
|
|
modifiers,
|
|
placement: placementProp = "bottom",
|
|
strategy = "absolute",
|
|
arrowPadding = 8,
|
|
eventListeners = true,
|
|
offset,
|
|
gutter = 8,
|
|
flip = true,
|
|
boundary = "clippingParents",
|
|
preventOverflow = true,
|
|
matchWidth: matchWidth2,
|
|
direction = "ltr"
|
|
} = props;
|
|
const reference = (0, import_react.useRef)(null);
|
|
const popper = (0, import_react.useRef)(null);
|
|
const instance = (0, import_react.useRef)(null);
|
|
const placement = getPopperPlacement(placementProp, direction);
|
|
const cleanup = (0, import_react.useRef)(() => {
|
|
});
|
|
const setupPopper = (0, import_react.useCallback)(() => {
|
|
var _a;
|
|
if (!enabled || !reference.current || !popper.current)
|
|
return;
|
|
(_a = cleanup.current) == null ? void 0 : _a.call(cleanup);
|
|
instance.current = (0, import_core.createPopper)(reference.current, popper.current, {
|
|
placement,
|
|
modifiers: [
|
|
innerArrow,
|
|
positionArrow,
|
|
transformOrigin,
|
|
{
|
|
...matchWidth,
|
|
enabled: !!matchWidth2
|
|
},
|
|
{
|
|
name: "eventListeners",
|
|
...getEventListenerOptions(eventListeners)
|
|
},
|
|
{
|
|
name: "arrow",
|
|
options: { padding: arrowPadding }
|
|
},
|
|
{
|
|
name: "offset",
|
|
options: {
|
|
offset: offset != null ? offset : [0, gutter]
|
|
}
|
|
},
|
|
{
|
|
name: "flip",
|
|
enabled: !!flip,
|
|
options: { padding: 8 }
|
|
},
|
|
{
|
|
name: "preventOverflow",
|
|
enabled: !!preventOverflow,
|
|
options: { boundary }
|
|
},
|
|
// allow users override internal modifiers
|
|
...modifiers != null ? modifiers : []
|
|
],
|
|
strategy
|
|
});
|
|
instance.current.forceUpdate();
|
|
cleanup.current = instance.current.destroy;
|
|
}, [
|
|
placement,
|
|
enabled,
|
|
modifiers,
|
|
matchWidth2,
|
|
eventListeners,
|
|
arrowPadding,
|
|
offset,
|
|
gutter,
|
|
flip,
|
|
preventOverflow,
|
|
boundary,
|
|
strategy
|
|
]);
|
|
(0, import_react.useEffect)(() => {
|
|
return () => {
|
|
var _a;
|
|
if (!reference.current && !popper.current) {
|
|
(_a = instance.current) == null ? void 0 : _a.destroy();
|
|
instance.current = null;
|
|
}
|
|
};
|
|
}, []);
|
|
const referenceRef = (0, import_react.useCallback)(
|
|
(node) => {
|
|
reference.current = node;
|
|
setupPopper();
|
|
},
|
|
[setupPopper]
|
|
);
|
|
const getReferenceProps = (0, import_react.useCallback)(
|
|
(props2 = {}, ref = null) => ({
|
|
...props2,
|
|
ref: (0, import_react_use_merge_refs.mergeRefs)(referenceRef, ref)
|
|
}),
|
|
[referenceRef]
|
|
);
|
|
const popperRef = (0, import_react.useCallback)(
|
|
(node) => {
|
|
popper.current = node;
|
|
setupPopper();
|
|
},
|
|
[setupPopper]
|
|
);
|
|
const getPopperProps = (0, import_react.useCallback)(
|
|
(props2 = {}, ref = null) => ({
|
|
...props2,
|
|
ref: (0, import_react_use_merge_refs.mergeRefs)(popperRef, ref),
|
|
style: {
|
|
...props2.style,
|
|
position: strategy,
|
|
minWidth: matchWidth2 ? void 0 : "max-content",
|
|
inset: "0 auto auto 0"
|
|
}
|
|
}),
|
|
[strategy, popperRef, matchWidth2]
|
|
);
|
|
const getArrowProps = (0, import_react.useCallback)((props2 = {}, ref = null) => {
|
|
const { size, shadowColor, bg, style, ...rest } = props2;
|
|
return {
|
|
...rest,
|
|
ref,
|
|
"data-popper-arrow": "",
|
|
style: getArrowStyle2(props2)
|
|
};
|
|
}, []);
|
|
const getArrowInnerProps = (0, import_react.useCallback)(
|
|
(props2 = {}, ref = null) => ({
|
|
...props2,
|
|
ref,
|
|
"data-popper-arrow-inner": ""
|
|
}),
|
|
[]
|
|
);
|
|
return {
|
|
update() {
|
|
var _a;
|
|
(_a = instance.current) == null ? void 0 : _a.update();
|
|
},
|
|
forceUpdate() {
|
|
var _a;
|
|
(_a = instance.current) == null ? void 0 : _a.forceUpdate();
|
|
},
|
|
transformOrigin: cssVars.transformOrigin.varRef,
|
|
referenceRef,
|
|
popperRef,
|
|
getPopperProps,
|
|
getArrowProps,
|
|
getArrowInnerProps,
|
|
getReferenceProps
|
|
};
|
|
}
|
|
function getArrowStyle2(props) {
|
|
const { size, shadowColor, bg, style } = props;
|
|
const computedStyle = { ...style, position: "absolute" };
|
|
if (size) {
|
|
computedStyle["--popper-arrow-size"] = size;
|
|
}
|
|
if (shadowColor) {
|
|
computedStyle["--popper-arrow-shadow-color"] = shadowColor;
|
|
}
|
|
if (bg) {
|
|
computedStyle["--popper-arrow-bg"] = bg;
|
|
}
|
|
return computedStyle;
|
|
}
|
|
// Annotate the CommonJS export names for ESM import in node:
|
|
0 && (module.exports = {
|
|
popperCSSVars,
|
|
usePopper
|
|
});
|
|
//# sourceMappingURL=index.js.map
|