@zag-js/popper 0.70.0 → 0.72.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +24 -56
- package/dist/index.mjs +6 -13
- package/package.json +4 -5
- package/dist/index.js.map +0 -1
- package/dist/index.mjs.map +0 -1
- package/src/get-anchor.ts +0 -42
- package/src/get-placement.ts +0 -209
- package/src/get-styles.ts +0 -56
- package/src/index.ts +0 -13
- package/src/middleware.ts +0 -87
- package/src/placement.ts +0 -15
- package/src/types.ts +0 -101
package/dist/index.js
CHANGED
|
@@ -1,39 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
-
var __export = (target, all) => {
|
|
7
|
-
for (var name in all)
|
|
8
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
-
};
|
|
10
|
-
var __copyProps = (to, from, except, desc) => {
|
|
11
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
-
for (let key of __getOwnPropNames(from))
|
|
13
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
-
}
|
|
16
|
-
return to;
|
|
17
|
-
};
|
|
18
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
1
|
+
'use strict';
|
|
19
2
|
|
|
20
|
-
|
|
21
|
-
var
|
|
22
|
-
|
|
23
|
-
getPlacement: () => getPlacement,
|
|
24
|
-
getPlacementSide: () => getPlacementSide,
|
|
25
|
-
getPlacementStyles: () => getPlacementStyles,
|
|
26
|
-
isValidPlacement: () => isValidPlacement
|
|
27
|
-
});
|
|
28
|
-
module.exports = __toCommonJS(src_exports);
|
|
3
|
+
var dom = require('@floating-ui/dom');
|
|
4
|
+
var domQuery = require('@zag-js/dom-query');
|
|
5
|
+
var utils = require('@zag-js/utils');
|
|
29
6
|
|
|
30
7
|
// src/get-placement.ts
|
|
31
|
-
var import_dom = require("@floating-ui/dom");
|
|
32
|
-
var import_dom_query2 = require("@zag-js/dom-query");
|
|
33
|
-
var import_utils = require("@zag-js/utils");
|
|
34
|
-
|
|
35
|
-
// src/get-anchor.ts
|
|
36
|
-
var import_dom_query = require("@zag-js/dom-query");
|
|
37
8
|
function createDOMRect(x = 0, y = 0, width = 0, height = 0) {
|
|
38
9
|
if (typeof DOMRect === "function") {
|
|
39
10
|
return new DOMRect(x, y, width, height);
|
|
@@ -57,7 +28,7 @@ function getDOMRect(anchorRect) {
|
|
|
57
28
|
}
|
|
58
29
|
function getAnchorElement(anchorElement, getAnchorRect) {
|
|
59
30
|
return {
|
|
60
|
-
contextElement:
|
|
31
|
+
contextElement: domQuery.isHTMLElement(anchorElement) ? anchorElement : void 0,
|
|
61
32
|
getBoundingClientRect: () => {
|
|
62
33
|
const anchor = anchorElement;
|
|
63
34
|
const anchorRect = getAnchorRect?.(anchor);
|
|
@@ -161,25 +132,25 @@ function roundByDpr(win, value) {
|
|
|
161
132
|
return Math.round(value * dpr) / dpr;
|
|
162
133
|
}
|
|
163
134
|
function getBoundaryMiddleware(opts) {
|
|
164
|
-
return
|
|
135
|
+
return utils.runIfFn(opts.boundary);
|
|
165
136
|
}
|
|
166
137
|
function getArrowMiddleware(arrowElement, opts) {
|
|
167
138
|
if (!arrowElement) return;
|
|
168
|
-
return
|
|
139
|
+
return dom.arrow({
|
|
169
140
|
element: arrowElement,
|
|
170
141
|
padding: opts.arrowPadding
|
|
171
142
|
});
|
|
172
143
|
}
|
|
173
144
|
function getOffsetMiddleware(arrowElement, opts) {
|
|
174
|
-
if (
|
|
175
|
-
return
|
|
145
|
+
if (utils.isNull(opts.offset ?? opts.gutter)) return;
|
|
146
|
+
return dom.offset(({ placement }) => {
|
|
176
147
|
const arrowOffset = (arrowElement?.clientHeight || 0) / 2;
|
|
177
148
|
const gutter = opts.offset?.mainAxis ?? opts.gutter;
|
|
178
149
|
const mainAxis = typeof gutter === "number" ? gutter + arrowOffset : gutter ?? arrowOffset;
|
|
179
150
|
const { hasAlign } = getPlacementDetails(placement);
|
|
180
151
|
const shift2 = !hasAlign ? opts.shift : void 0;
|
|
181
152
|
const crossAxis = opts.offset?.crossAxis ?? shift2;
|
|
182
|
-
return
|
|
153
|
+
return utils.compact({
|
|
183
154
|
crossAxis,
|
|
184
155
|
mainAxis,
|
|
185
156
|
alignmentAxis: opts.shift
|
|
@@ -188,7 +159,7 @@ function getOffsetMiddleware(arrowElement, opts) {
|
|
|
188
159
|
}
|
|
189
160
|
function getFlipMiddleware(opts) {
|
|
190
161
|
if (!opts.flip) return;
|
|
191
|
-
return
|
|
162
|
+
return dom.flip({
|
|
192
163
|
boundary: getBoundaryMiddleware(opts),
|
|
193
164
|
padding: opts.overflowPadding,
|
|
194
165
|
fallbackPlacements: opts.flip === true ? void 0 : opts.flip
|
|
@@ -196,16 +167,16 @@ function getFlipMiddleware(opts) {
|
|
|
196
167
|
}
|
|
197
168
|
function getShiftMiddleware(opts) {
|
|
198
169
|
if (!opts.slide && !opts.overlap) return;
|
|
199
|
-
return
|
|
170
|
+
return dom.shift({
|
|
200
171
|
boundary: getBoundaryMiddleware(opts),
|
|
201
172
|
mainAxis: opts.slide,
|
|
202
173
|
crossAxis: opts.overlap,
|
|
203
174
|
padding: opts.overflowPadding,
|
|
204
|
-
limiter:
|
|
175
|
+
limiter: dom.limitShift()
|
|
205
176
|
});
|
|
206
177
|
}
|
|
207
178
|
function getSizeMiddleware(opts) {
|
|
208
|
-
return
|
|
179
|
+
return dom.size({
|
|
209
180
|
padding: opts.overflowPadding,
|
|
210
181
|
apply({ elements, rects, availableHeight, availableWidth }) {
|
|
211
182
|
const floating = elements.floating;
|
|
@@ -220,7 +191,7 @@ function getSizeMiddleware(opts) {
|
|
|
220
191
|
}
|
|
221
192
|
function hideWhenDetachedMiddleware(opts) {
|
|
222
193
|
if (!opts.hideWhenDetached) return;
|
|
223
|
-
return
|
|
194
|
+
return dom.hide({ strategy: "referenceHidden", boundary: opts.boundary?.() ?? "clippingAncestors" });
|
|
224
195
|
}
|
|
225
196
|
function getAutoUpdateOptions(opts) {
|
|
226
197
|
if (!opts) return {};
|
|
@@ -248,14 +219,14 @@ function getPlacementImpl(referenceOrVirtual, floating, opts = {}) {
|
|
|
248
219
|
const { placement, strategy, onComplete, onPositioned } = options;
|
|
249
220
|
const updatePosition = async () => {
|
|
250
221
|
if (!reference || !floating) return;
|
|
251
|
-
const pos = await
|
|
222
|
+
const pos = await dom.computePosition(reference, floating, {
|
|
252
223
|
placement,
|
|
253
224
|
middleware,
|
|
254
225
|
strategy
|
|
255
226
|
});
|
|
256
227
|
onComplete?.(pos);
|
|
257
228
|
onPositioned?.({ placed: true });
|
|
258
|
-
const win =
|
|
229
|
+
const win = domQuery.getWindow(floating);
|
|
259
230
|
const x = roundByDpr(win, pos.x);
|
|
260
231
|
const y = roundByDpr(win, pos.y);
|
|
261
232
|
floating.style.setProperty("--x", `${x}px`);
|
|
@@ -278,7 +249,7 @@ function getPlacementImpl(referenceOrVirtual, floating, opts = {}) {
|
|
|
278
249
|
}
|
|
279
250
|
};
|
|
280
251
|
const autoUpdateOptions = getAutoUpdateOptions(options.listeners);
|
|
281
|
-
const cancelAutoUpdate = options.listeners ?
|
|
252
|
+
const cancelAutoUpdate = options.listeners ? dom.autoUpdate(reference, floating, update, autoUpdateOptions) : utils.noop;
|
|
282
253
|
update();
|
|
283
254
|
return () => {
|
|
284
255
|
cancelAutoUpdate?.();
|
|
@@ -287,7 +258,7 @@ function getPlacementImpl(referenceOrVirtual, floating, opts = {}) {
|
|
|
287
258
|
}
|
|
288
259
|
function getPlacement(referenceOrFn, floatingOrFn, opts = {}) {
|
|
289
260
|
const { defer, ...options } = opts;
|
|
290
|
-
const func = defer ?
|
|
261
|
+
const func = defer ? domQuery.raf : (v) => v();
|
|
291
262
|
const cleanups = [];
|
|
292
263
|
cleanups.push(
|
|
293
264
|
func(() => {
|
|
@@ -344,11 +315,8 @@ function getPlacementStyles(options = {}) {
|
|
|
344
315
|
}
|
|
345
316
|
};
|
|
346
317
|
}
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
isValidPlacement
|
|
353
|
-
});
|
|
354
|
-
//# sourceMappingURL=index.js.map
|
|
318
|
+
|
|
319
|
+
exports.getPlacement = getPlacement;
|
|
320
|
+
exports.getPlacementSide = getPlacementSide;
|
|
321
|
+
exports.getPlacementStyles = getPlacementStyles;
|
|
322
|
+
exports.isValidPlacement = isValidPlacement;
|
package/dist/index.mjs
CHANGED
|
@@ -1,10 +1,8 @@
|
|
|
1
|
-
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import { compact, isNull, noop, runIfFn } from "@zag-js/utils";
|
|
1
|
+
import { autoUpdate, arrow, offset, flip, shift, limitShift, size, hide, computePosition } from '@floating-ui/dom';
|
|
2
|
+
import { raf, isHTMLElement, getWindow } from '@zag-js/dom-query';
|
|
3
|
+
import { noop, isNull, compact, runIfFn } from '@zag-js/utils';
|
|
5
4
|
|
|
6
|
-
// src/get-
|
|
7
|
-
import { isHTMLElement } from "@zag-js/dom-query";
|
|
5
|
+
// src/get-placement.ts
|
|
8
6
|
function createDOMRect(x = 0, y = 0, width = 0, height = 0) {
|
|
9
7
|
if (typeof DOMRect === "function") {
|
|
10
8
|
return new DOMRect(x, y, width, height);
|
|
@@ -315,10 +313,5 @@ function getPlacementStyles(options = {}) {
|
|
|
315
313
|
}
|
|
316
314
|
};
|
|
317
315
|
}
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
getPlacementSide,
|
|
321
|
-
getPlacementStyles,
|
|
322
|
-
isValidPlacement
|
|
323
|
-
};
|
|
324
|
-
//# sourceMappingURL=index.mjs.map
|
|
316
|
+
|
|
317
|
+
export { getPlacement, getPlacementSide, getPlacementStyles, isValidPlacement };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zag-js/popper",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.72.0",
|
|
4
4
|
"description": "Dynamic positioning logic for ui machines",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"js",
|
|
@@ -13,8 +13,7 @@
|
|
|
13
13
|
"repository": "https://github.com/chakra-ui/zag/tree/main/packages/utilities/popper",
|
|
14
14
|
"sideEffects": false,
|
|
15
15
|
"files": [
|
|
16
|
-
"dist"
|
|
17
|
-
"src"
|
|
16
|
+
"dist"
|
|
18
17
|
],
|
|
19
18
|
"publishConfig": {
|
|
20
19
|
"access": "public"
|
|
@@ -24,8 +23,8 @@
|
|
|
24
23
|
},
|
|
25
24
|
"dependencies": {
|
|
26
25
|
"@floating-ui/dom": "1.6.11",
|
|
27
|
-
"@zag-js/dom-query": "0.
|
|
28
|
-
"@zag-js/utils": "0.
|
|
26
|
+
"@zag-js/dom-query": "0.72.0",
|
|
27
|
+
"@zag-js/utils": "0.72.0"
|
|
29
28
|
},
|
|
30
29
|
"devDependencies": {
|
|
31
30
|
"clean-package": "2.2.0"
|
package/dist/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/get-placement.ts","../src/get-anchor.ts","../src/middleware.ts","../src/placement.ts","../src/get-styles.ts"],"sourcesContent":["export { getPlacement } from \"./get-placement\"\nexport { getPlacementStyles, type GetPlacementStylesOptions } from \"./get-styles\"\nexport { getPlacementSide, isValidPlacement } from \"./placement\"\nexport type {\n AnchorRect,\n AutoUpdateOptions,\n Boundary,\n ComputePositionReturn,\n Placement,\n PlacementAlign,\n PlacementSide,\n PositioningOptions,\n} from \"./types\"\n","import type { AutoUpdateOptions, Middleware } from \"@floating-ui/dom\"\nimport { arrow, autoUpdate, computePosition, flip, hide, limitShift, offset, shift, size } from \"@floating-ui/dom\"\nimport { getWindow, raf } from \"@zag-js/dom-query\"\nimport { compact, isNull, noop, runIfFn } from \"@zag-js/utils\"\nimport { getAnchorElement } from \"./get-anchor\"\nimport { rectMiddleware, shiftArrowMiddleware, transformOriginMiddleware } from \"./middleware\"\nimport { getPlacementDetails } from \"./placement\"\nimport type { MaybeElement, MaybeFn, MaybeRectElement, PositioningOptions } from \"./types\"\n\nconst defaultOptions: PositioningOptions = {\n strategy: \"absolute\",\n placement: \"bottom\",\n listeners: true,\n gutter: 8,\n flip: true,\n slide: true,\n overlap: false,\n sameWidth: false,\n fitViewport: false,\n overflowPadding: 8,\n arrowPadding: 4,\n}\n\nfunction roundByDpr(win: Window, value: number) {\n const dpr = win.devicePixelRatio || 1\n return Math.round(value * dpr) / dpr\n}\n\nfunction getBoundaryMiddleware(opts: PositioningOptions) {\n return runIfFn(opts.boundary)\n}\n\nfunction getArrowMiddleware(arrowElement: HTMLElement | null, opts: PositioningOptions) {\n if (!arrowElement) return\n return arrow({\n element: arrowElement,\n padding: opts.arrowPadding,\n })\n}\n\nfunction getOffsetMiddleware(arrowElement: HTMLElement | null, opts: PositioningOptions) {\n if (isNull(opts.offset ?? opts.gutter)) return\n return offset(({ placement }) => {\n const arrowOffset = (arrowElement?.clientHeight || 0) / 2\n\n const gutter = opts.offset?.mainAxis ?? opts.gutter\n const mainAxis = typeof gutter === \"number\" ? gutter + arrowOffset : (gutter ?? arrowOffset)\n\n const { hasAlign } = getPlacementDetails(placement)\n const shift = !hasAlign ? opts.shift : undefined\n const crossAxis = opts.offset?.crossAxis ?? shift\n\n return compact({\n crossAxis: crossAxis,\n mainAxis: mainAxis,\n alignmentAxis: opts.shift,\n })\n })\n}\n\nfunction getFlipMiddleware(opts: PositioningOptions) {\n if (!opts.flip) return\n return flip({\n boundary: getBoundaryMiddleware(opts),\n padding: opts.overflowPadding,\n fallbackPlacements: opts.flip === true ? undefined : opts.flip,\n })\n}\n\nfunction getShiftMiddleware(opts: PositioningOptions) {\n if (!opts.slide && !opts.overlap) return\n return shift({\n boundary: getBoundaryMiddleware(opts),\n mainAxis: opts.slide,\n crossAxis: opts.overlap,\n padding: opts.overflowPadding,\n limiter: limitShift(),\n })\n}\n\nfunction getSizeMiddleware(opts: PositioningOptions) {\n return size({\n padding: opts.overflowPadding,\n apply({ elements, rects, availableHeight, availableWidth }) {\n const floating = elements.floating\n\n const referenceWidth = Math.round(rects.reference.width)\n availableWidth = Math.floor(availableWidth)\n availableHeight = Math.floor(availableHeight)\n\n floating.style.setProperty(\"--reference-width\", `${referenceWidth}px`)\n floating.style.setProperty(\"--available-width\", `${availableWidth}px`)\n floating.style.setProperty(\"--available-height\", `${availableHeight}px`)\n },\n })\n}\n\nfunction hideWhenDetachedMiddleware(opts: PositioningOptions) {\n if (!opts.hideWhenDetached) return\n return hide({ strategy: \"referenceHidden\", boundary: opts.boundary?.() ?? \"clippingAncestors\" })\n}\n\nfunction getAutoUpdateOptions(opts?: boolean | AutoUpdateOptions): AutoUpdateOptions {\n if (!opts) return {}\n if (opts === true) {\n return { ancestorResize: true, ancestorScroll: true, elementResize: true, layoutShift: true }\n }\n return opts\n}\n\nfunction getPlacementImpl(referenceOrVirtual: MaybeRectElement, floating: MaybeElement, opts: PositioningOptions = {}) {\n const reference = getAnchorElement(referenceOrVirtual, opts.getAnchorRect)\n if (!floating || !reference) return\n const options = Object.assign({}, defaultOptions, opts)\n\n /* -----------------------------------------------------------------------------\n * The middleware stack\n * -----------------------------------------------------------------------------*/\n\n const arrowEl = floating.querySelector<HTMLElement>(\"[data-part=arrow]\")\n\n const middleware: (Middleware | undefined)[] = [\n getOffsetMiddleware(arrowEl, options),\n getFlipMiddleware(options),\n getShiftMiddleware(options),\n getArrowMiddleware(arrowEl, options),\n shiftArrowMiddleware(arrowEl),\n transformOriginMiddleware,\n getSizeMiddleware(options),\n hideWhenDetachedMiddleware(options),\n rectMiddleware,\n ]\n\n /* -----------------------------------------------------------------------------\n * The actual positioning function\n * -----------------------------------------------------------------------------*/\n\n const { placement, strategy, onComplete, onPositioned } = options\n\n const updatePosition = async () => {\n if (!reference || !floating) return\n\n const pos = await computePosition(reference, floating, {\n placement,\n middleware,\n strategy,\n })\n\n onComplete?.(pos)\n onPositioned?.({ placed: true })\n\n const win = getWindow(floating)\n const x = roundByDpr(win, pos.x)\n const y = roundByDpr(win, pos.y)\n\n floating.style.setProperty(\"--x\", `${x}px`)\n floating.style.setProperty(\"--y\", `${y}px`)\n\n if (options.hideWhenDetached && pos.middlewareData.hide?.referenceHidden) {\n floating.style.setProperty(\"visibility\", \"hidden\")\n }\n\n const contentEl = floating.firstElementChild\n\n if (contentEl) {\n const zIndex = win.getComputedStyle(contentEl).zIndex\n floating.style.setProperty(\"--z-index\", zIndex)\n }\n }\n\n const update = async () => {\n if (opts.updatePosition) {\n await opts.updatePosition({ updatePosition })\n onPositioned?.({ placed: true })\n } else {\n await updatePosition()\n }\n }\n\n const autoUpdateOptions = getAutoUpdateOptions(options.listeners)\n const cancelAutoUpdate = options.listeners ? autoUpdate(reference, floating, update, autoUpdateOptions) : noop\n\n update()\n\n return () => {\n cancelAutoUpdate?.()\n onPositioned?.({ placed: false })\n }\n}\n\nexport function getPlacement(\n referenceOrFn: MaybeFn<MaybeRectElement>,\n floatingOrFn: MaybeFn<MaybeElement>,\n opts: PositioningOptions & { defer?: boolean } = {},\n) {\n const { defer, ...options } = opts\n const func = defer ? raf : (v: any) => v()\n const cleanups: (VoidFunction | undefined)[] = []\n cleanups.push(\n func(() => {\n const reference = typeof referenceOrFn === \"function\" ? referenceOrFn() : referenceOrFn\n const floating = typeof floatingOrFn === \"function\" ? floatingOrFn() : floatingOrFn\n cleanups.push(getPlacementImpl(reference, floating, options))\n }),\n )\n return () => {\n cleanups.forEach((fn) => fn?.())\n }\n}\n","import { isHTMLElement } from \"@zag-js/dom-query\"\nimport type { AnchorRect, MaybeRectElement } from \"./types\"\n\nexport function createDOMRect(x = 0, y = 0, width = 0, height = 0) {\n if (typeof DOMRect === \"function\") {\n return new DOMRect(x, y, width, height)\n }\n const rect = {\n x,\n y,\n width,\n height,\n top: y,\n right: x + width,\n bottom: y + height,\n left: x,\n }\n return { ...rect, toJSON: () => rect }\n}\n\nfunction getDOMRect(anchorRect?: AnchorRect | null) {\n if (!anchorRect) return createDOMRect()\n const { x, y, width, height } = anchorRect\n return createDOMRect(x, y, width, height)\n}\n\nexport function getAnchorElement(\n anchorElement: MaybeRectElement,\n getAnchorRect?: (anchor: MaybeRectElement) => AnchorRect | null,\n) {\n return {\n contextElement: isHTMLElement(anchorElement) ? anchorElement : undefined,\n getBoundingClientRect: () => {\n const anchor = anchorElement\n const anchorRect = getAnchorRect?.(anchor)\n if (anchorRect || !anchor) {\n return getDOMRect(anchorRect)\n }\n return anchor.getBoundingClientRect()\n },\n }\n}\n","import type { Coords, Middleware } from \"@floating-ui/dom\"\nimport type { PlacementSide } from \"./types\"\n\n/* -----------------------------------------------------------------------------\n * Shared middleware utils\n * -----------------------------------------------------------------------------*/\n\nconst toVar = (value: string) => ({ variable: value, reference: `var(${value})` })\n\nexport const cssVars = {\n arrowSize: toVar(\"--arrow-size\"),\n arrowSizeHalf: toVar(\"--arrow-size-half\"),\n arrowBg: toVar(\"--arrow-background\"),\n transformOrigin: toVar(\"--transform-origin\"),\n arrowOffset: toVar(\"--arrow-offset\"),\n}\n\n/* -----------------------------------------------------------------------------\n * Transform Origin Middleware\n * -----------------------------------------------------------------------------*/\n\nconst getTransformOrigin = (arrow?: Partial<Coords>) => ({\n top: \"bottom center\",\n \"top-start\": arrow ? `${arrow.x}px bottom` : \"left bottom\",\n \"top-end\": arrow ? `${arrow.x}px bottom` : \"right bottom\",\n bottom: \"top center\",\n \"bottom-start\": arrow ? `${arrow.x}px top` : \"top left\",\n \"bottom-end\": arrow ? `${arrow.x}px top` : \"top right\",\n left: \"right center\",\n \"left-start\": arrow ? `right ${arrow.y}px` : \"right top\",\n \"left-end\": arrow ? `right ${arrow.y}px` : \"right bottom\",\n right: \"left center\",\n \"right-start\": arrow ? `left ${arrow.y}px` : \"left top\",\n \"right-end\": arrow ? `left ${arrow.y}px` : \"left bottom\",\n})\n\nexport const transformOriginMiddleware: Middleware = {\n name: \"transformOrigin\",\n fn({ placement, elements, middlewareData }) {\n const { arrow } = middlewareData\n const transformOrigin = getTransformOrigin(arrow)[placement]\n\n const { floating } = elements\n floating.style.setProperty(cssVars.transformOrigin.variable, transformOrigin)\n\n return {\n data: { transformOrigin },\n }\n },\n}\n\n/* -----------------------------------------------------------------------------\n * Rect Middleware (to expose the rect data)\n * -----------------------------------------------------------------------------*/\n\nexport const rectMiddleware: Middleware = {\n name: \"rects\",\n fn({ rects }) {\n return {\n data: rects,\n }\n },\n}\n\n/* -----------------------------------------------------------------------------\n * Arrow Middleware\n * -----------------------------------------------------------------------------*/\n\nexport const shiftArrowMiddleware = (arrowEl: HTMLElement | null): Middleware | undefined => {\n if (!arrowEl) return\n return {\n name: \"shiftArrow\",\n fn({ placement, middlewareData }) {\n if (!middlewareData.arrow) return {}\n const { x, y } = middlewareData.arrow\n const dir = placement.split(\"-\")[0] as PlacementSide\n\n Object.assign(arrowEl.style, {\n left: x != null ? `${x}px` : \"\",\n top: y != null ? `${y}px` : \"\",\n [dir]: `calc(100% + ${cssVars.arrowOffset.reference})`,\n })\n\n return {}\n },\n }\n}\n","import type { Placement } from \"@floating-ui/dom\"\nimport type { PlacementAlign, PlacementSide } from \"./types\"\n\nexport function isValidPlacement(v: string): v is Placement {\n return /^(?:top|bottom|left|right)(?:-(?:start|end))?$/.test(v)\n}\n\nexport function getPlacementDetails(placement: Placement) {\n const [side, align] = placement.split(\"-\") as [PlacementSide, PlacementAlign | undefined]\n return { side, align, hasAlign: align != null }\n}\n\nexport function getPlacementSide(placement: Placement): PlacementSide {\n return placement.split(\"-\")[0] as PlacementSide\n}\n","import type { Placement } from \"@floating-ui/dom\"\nimport { cssVars } from \"./middleware\"\nimport type { PositioningOptions } from \"./types\"\n\nexport interface GetPlacementStylesOptions {\n placement?: Placement\n}\n\nconst ARROW_FLOATING_STYLE = {\n bottom: \"rotate(45deg)\",\n left: \"rotate(135deg)\",\n top: \"rotate(225deg)\",\n right: \"rotate(315deg)\",\n} as const\n\nexport function getPlacementStyles(\n options: Pick<PositioningOptions, \"placement\" | \"sameWidth\" | \"fitViewport\" | \"strategy\"> = {},\n) {\n const { placement, sameWidth, fitViewport, strategy = \"absolute\" } = options\n\n return {\n arrow: {\n position: \"absolute\",\n width: cssVars.arrowSize.reference,\n height: cssVars.arrowSize.reference,\n [cssVars.arrowSizeHalf.variable]: `calc(${cssVars.arrowSize.reference} / 2)`,\n [cssVars.arrowOffset.variable]: `calc(${cssVars.arrowSizeHalf.reference} * -1)`,\n } as const,\n\n arrowTip: {\n // @ts-expect-error - Fix this\n transform: placement ? ARROW_FLOATING_STYLE[placement.split(\"-\")[0]] : undefined,\n background: cssVars.arrowBg.reference,\n top: \"0\",\n left: \"0\",\n width: \"100%\",\n height: \"100%\",\n position: \"absolute\",\n zIndex: \"inherit\",\n } as const,\n\n floating: {\n position: strategy,\n isolation: \"isolate\",\n minWidth: sameWidth ? undefined : \"max-content\",\n width: sameWidth ? \"var(--reference-width)\" : undefined,\n maxWidth: fitViewport ? \"var(--available-width)\" : undefined,\n maxHeight: fitViewport ? \"var(--available-height)\" : undefined,\n top: \"0px\",\n left: \"0px\",\n // move off-screen if placement is not defined\n transform: placement ? \"translate3d(var(--x), var(--y), 0)\" : \"translate3d(0, -100vh, 0)\",\n zIndex: \"var(--z-index)\",\n } as const,\n }\n}\n"],"mappings":"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","names":["import_dom_query","arrow","shift"]}
|
package/dist/index.mjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/get-placement.ts","../src/get-anchor.ts","../src/middleware.ts","../src/placement.ts","../src/get-styles.ts"],"sourcesContent":["import type { AutoUpdateOptions, Middleware } from \"@floating-ui/dom\"\nimport { arrow, autoUpdate, computePosition, flip, hide, limitShift, offset, shift, size } from \"@floating-ui/dom\"\nimport { getWindow, raf } from \"@zag-js/dom-query\"\nimport { compact, isNull, noop, runIfFn } from \"@zag-js/utils\"\nimport { getAnchorElement } from \"./get-anchor\"\nimport { rectMiddleware, shiftArrowMiddleware, transformOriginMiddleware } from \"./middleware\"\nimport { getPlacementDetails } from \"./placement\"\nimport type { MaybeElement, MaybeFn, MaybeRectElement, PositioningOptions } from \"./types\"\n\nconst defaultOptions: PositioningOptions = {\n strategy: \"absolute\",\n placement: \"bottom\",\n listeners: true,\n gutter: 8,\n flip: true,\n slide: true,\n overlap: false,\n sameWidth: false,\n fitViewport: false,\n overflowPadding: 8,\n arrowPadding: 4,\n}\n\nfunction roundByDpr(win: Window, value: number) {\n const dpr = win.devicePixelRatio || 1\n return Math.round(value * dpr) / dpr\n}\n\nfunction getBoundaryMiddleware(opts: PositioningOptions) {\n return runIfFn(opts.boundary)\n}\n\nfunction getArrowMiddleware(arrowElement: HTMLElement | null, opts: PositioningOptions) {\n if (!arrowElement) return\n return arrow({\n element: arrowElement,\n padding: opts.arrowPadding,\n })\n}\n\nfunction getOffsetMiddleware(arrowElement: HTMLElement | null, opts: PositioningOptions) {\n if (isNull(opts.offset ?? opts.gutter)) return\n return offset(({ placement }) => {\n const arrowOffset = (arrowElement?.clientHeight || 0) / 2\n\n const gutter = opts.offset?.mainAxis ?? opts.gutter\n const mainAxis = typeof gutter === \"number\" ? gutter + arrowOffset : (gutter ?? arrowOffset)\n\n const { hasAlign } = getPlacementDetails(placement)\n const shift = !hasAlign ? opts.shift : undefined\n const crossAxis = opts.offset?.crossAxis ?? shift\n\n return compact({\n crossAxis: crossAxis,\n mainAxis: mainAxis,\n alignmentAxis: opts.shift,\n })\n })\n}\n\nfunction getFlipMiddleware(opts: PositioningOptions) {\n if (!opts.flip) return\n return flip({\n boundary: getBoundaryMiddleware(opts),\n padding: opts.overflowPadding,\n fallbackPlacements: opts.flip === true ? undefined : opts.flip,\n })\n}\n\nfunction getShiftMiddleware(opts: PositioningOptions) {\n if (!opts.slide && !opts.overlap) return\n return shift({\n boundary: getBoundaryMiddleware(opts),\n mainAxis: opts.slide,\n crossAxis: opts.overlap,\n padding: opts.overflowPadding,\n limiter: limitShift(),\n })\n}\n\nfunction getSizeMiddleware(opts: PositioningOptions) {\n return size({\n padding: opts.overflowPadding,\n apply({ elements, rects, availableHeight, availableWidth }) {\n const floating = elements.floating\n\n const referenceWidth = Math.round(rects.reference.width)\n availableWidth = Math.floor(availableWidth)\n availableHeight = Math.floor(availableHeight)\n\n floating.style.setProperty(\"--reference-width\", `${referenceWidth}px`)\n floating.style.setProperty(\"--available-width\", `${availableWidth}px`)\n floating.style.setProperty(\"--available-height\", `${availableHeight}px`)\n },\n })\n}\n\nfunction hideWhenDetachedMiddleware(opts: PositioningOptions) {\n if (!opts.hideWhenDetached) return\n return hide({ strategy: \"referenceHidden\", boundary: opts.boundary?.() ?? \"clippingAncestors\" })\n}\n\nfunction getAutoUpdateOptions(opts?: boolean | AutoUpdateOptions): AutoUpdateOptions {\n if (!opts) return {}\n if (opts === true) {\n return { ancestorResize: true, ancestorScroll: true, elementResize: true, layoutShift: true }\n }\n return opts\n}\n\nfunction getPlacementImpl(referenceOrVirtual: MaybeRectElement, floating: MaybeElement, opts: PositioningOptions = {}) {\n const reference = getAnchorElement(referenceOrVirtual, opts.getAnchorRect)\n if (!floating || !reference) return\n const options = Object.assign({}, defaultOptions, opts)\n\n /* -----------------------------------------------------------------------------\n * The middleware stack\n * -----------------------------------------------------------------------------*/\n\n const arrowEl = floating.querySelector<HTMLElement>(\"[data-part=arrow]\")\n\n const middleware: (Middleware | undefined)[] = [\n getOffsetMiddleware(arrowEl, options),\n getFlipMiddleware(options),\n getShiftMiddleware(options),\n getArrowMiddleware(arrowEl, options),\n shiftArrowMiddleware(arrowEl),\n transformOriginMiddleware,\n getSizeMiddleware(options),\n hideWhenDetachedMiddleware(options),\n rectMiddleware,\n ]\n\n /* -----------------------------------------------------------------------------\n * The actual positioning function\n * -----------------------------------------------------------------------------*/\n\n const { placement, strategy, onComplete, onPositioned } = options\n\n const updatePosition = async () => {\n if (!reference || !floating) return\n\n const pos = await computePosition(reference, floating, {\n placement,\n middleware,\n strategy,\n })\n\n onComplete?.(pos)\n onPositioned?.({ placed: true })\n\n const win = getWindow(floating)\n const x = roundByDpr(win, pos.x)\n const y = roundByDpr(win, pos.y)\n\n floating.style.setProperty(\"--x\", `${x}px`)\n floating.style.setProperty(\"--y\", `${y}px`)\n\n if (options.hideWhenDetached && pos.middlewareData.hide?.referenceHidden) {\n floating.style.setProperty(\"visibility\", \"hidden\")\n }\n\n const contentEl = floating.firstElementChild\n\n if (contentEl) {\n const zIndex = win.getComputedStyle(contentEl).zIndex\n floating.style.setProperty(\"--z-index\", zIndex)\n }\n }\n\n const update = async () => {\n if (opts.updatePosition) {\n await opts.updatePosition({ updatePosition })\n onPositioned?.({ placed: true })\n } else {\n await updatePosition()\n }\n }\n\n const autoUpdateOptions = getAutoUpdateOptions(options.listeners)\n const cancelAutoUpdate = options.listeners ? autoUpdate(reference, floating, update, autoUpdateOptions) : noop\n\n update()\n\n return () => {\n cancelAutoUpdate?.()\n onPositioned?.({ placed: false })\n }\n}\n\nexport function getPlacement(\n referenceOrFn: MaybeFn<MaybeRectElement>,\n floatingOrFn: MaybeFn<MaybeElement>,\n opts: PositioningOptions & { defer?: boolean } = {},\n) {\n const { defer, ...options } = opts\n const func = defer ? raf : (v: any) => v()\n const cleanups: (VoidFunction | undefined)[] = []\n cleanups.push(\n func(() => {\n const reference = typeof referenceOrFn === \"function\" ? referenceOrFn() : referenceOrFn\n const floating = typeof floatingOrFn === \"function\" ? floatingOrFn() : floatingOrFn\n cleanups.push(getPlacementImpl(reference, floating, options))\n }),\n )\n return () => {\n cleanups.forEach((fn) => fn?.())\n }\n}\n","import { isHTMLElement } from \"@zag-js/dom-query\"\nimport type { AnchorRect, MaybeRectElement } from \"./types\"\n\nexport function createDOMRect(x = 0, y = 0, width = 0, height = 0) {\n if (typeof DOMRect === \"function\") {\n return new DOMRect(x, y, width, height)\n }\n const rect = {\n x,\n y,\n width,\n height,\n top: y,\n right: x + width,\n bottom: y + height,\n left: x,\n }\n return { ...rect, toJSON: () => rect }\n}\n\nfunction getDOMRect(anchorRect?: AnchorRect | null) {\n if (!anchorRect) return createDOMRect()\n const { x, y, width, height } = anchorRect\n return createDOMRect(x, y, width, height)\n}\n\nexport function getAnchorElement(\n anchorElement: MaybeRectElement,\n getAnchorRect?: (anchor: MaybeRectElement) => AnchorRect | null,\n) {\n return {\n contextElement: isHTMLElement(anchorElement) ? anchorElement : undefined,\n getBoundingClientRect: () => {\n const anchor = anchorElement\n const anchorRect = getAnchorRect?.(anchor)\n if (anchorRect || !anchor) {\n return getDOMRect(anchorRect)\n }\n return anchor.getBoundingClientRect()\n },\n }\n}\n","import type { Coords, Middleware } from \"@floating-ui/dom\"\nimport type { PlacementSide } from \"./types\"\n\n/* -----------------------------------------------------------------------------\n * Shared middleware utils\n * -----------------------------------------------------------------------------*/\n\nconst toVar = (value: string) => ({ variable: value, reference: `var(${value})` })\n\nexport const cssVars = {\n arrowSize: toVar(\"--arrow-size\"),\n arrowSizeHalf: toVar(\"--arrow-size-half\"),\n arrowBg: toVar(\"--arrow-background\"),\n transformOrigin: toVar(\"--transform-origin\"),\n arrowOffset: toVar(\"--arrow-offset\"),\n}\n\n/* -----------------------------------------------------------------------------\n * Transform Origin Middleware\n * -----------------------------------------------------------------------------*/\n\nconst getTransformOrigin = (arrow?: Partial<Coords>) => ({\n top: \"bottom center\",\n \"top-start\": arrow ? `${arrow.x}px bottom` : \"left bottom\",\n \"top-end\": arrow ? `${arrow.x}px bottom` : \"right bottom\",\n bottom: \"top center\",\n \"bottom-start\": arrow ? `${arrow.x}px top` : \"top left\",\n \"bottom-end\": arrow ? `${arrow.x}px top` : \"top right\",\n left: \"right center\",\n \"left-start\": arrow ? `right ${arrow.y}px` : \"right top\",\n \"left-end\": arrow ? `right ${arrow.y}px` : \"right bottom\",\n right: \"left center\",\n \"right-start\": arrow ? `left ${arrow.y}px` : \"left top\",\n \"right-end\": arrow ? `left ${arrow.y}px` : \"left bottom\",\n})\n\nexport const transformOriginMiddleware: Middleware = {\n name: \"transformOrigin\",\n fn({ placement, elements, middlewareData }) {\n const { arrow } = middlewareData\n const transformOrigin = getTransformOrigin(arrow)[placement]\n\n const { floating } = elements\n floating.style.setProperty(cssVars.transformOrigin.variable, transformOrigin)\n\n return {\n data: { transformOrigin },\n }\n },\n}\n\n/* -----------------------------------------------------------------------------\n * Rect Middleware (to expose the rect data)\n * -----------------------------------------------------------------------------*/\n\nexport const rectMiddleware: Middleware = {\n name: \"rects\",\n fn({ rects }) {\n return {\n data: rects,\n }\n },\n}\n\n/* -----------------------------------------------------------------------------\n * Arrow Middleware\n * -----------------------------------------------------------------------------*/\n\nexport const shiftArrowMiddleware = (arrowEl: HTMLElement | null): Middleware | undefined => {\n if (!arrowEl) return\n return {\n name: \"shiftArrow\",\n fn({ placement, middlewareData }) {\n if (!middlewareData.arrow) return {}\n const { x, y } = middlewareData.arrow\n const dir = placement.split(\"-\")[0] as PlacementSide\n\n Object.assign(arrowEl.style, {\n left: x != null ? `${x}px` : \"\",\n top: y != null ? `${y}px` : \"\",\n [dir]: `calc(100% + ${cssVars.arrowOffset.reference})`,\n })\n\n return {}\n },\n }\n}\n","import type { Placement } from \"@floating-ui/dom\"\nimport type { PlacementAlign, PlacementSide } from \"./types\"\n\nexport function isValidPlacement(v: string): v is Placement {\n return /^(?:top|bottom|left|right)(?:-(?:start|end))?$/.test(v)\n}\n\nexport function getPlacementDetails(placement: Placement) {\n const [side, align] = placement.split(\"-\") as [PlacementSide, PlacementAlign | undefined]\n return { side, align, hasAlign: align != null }\n}\n\nexport function getPlacementSide(placement: Placement): PlacementSide {\n return placement.split(\"-\")[0] as PlacementSide\n}\n","import type { Placement } from \"@floating-ui/dom\"\nimport { cssVars } from \"./middleware\"\nimport type { PositioningOptions } from \"./types\"\n\nexport interface GetPlacementStylesOptions {\n placement?: Placement\n}\n\nconst ARROW_FLOATING_STYLE = {\n bottom: \"rotate(45deg)\",\n left: \"rotate(135deg)\",\n top: \"rotate(225deg)\",\n right: \"rotate(315deg)\",\n} as const\n\nexport function getPlacementStyles(\n options: Pick<PositioningOptions, \"placement\" | \"sameWidth\" | \"fitViewport\" | \"strategy\"> = {},\n) {\n const { placement, sameWidth, fitViewport, strategy = \"absolute\" } = options\n\n return {\n arrow: {\n position: \"absolute\",\n width: cssVars.arrowSize.reference,\n height: cssVars.arrowSize.reference,\n [cssVars.arrowSizeHalf.variable]: `calc(${cssVars.arrowSize.reference} / 2)`,\n [cssVars.arrowOffset.variable]: `calc(${cssVars.arrowSizeHalf.reference} * -1)`,\n } as const,\n\n arrowTip: {\n // @ts-expect-error - Fix this\n transform: placement ? ARROW_FLOATING_STYLE[placement.split(\"-\")[0]] : undefined,\n background: cssVars.arrowBg.reference,\n top: \"0\",\n left: \"0\",\n width: \"100%\",\n height: \"100%\",\n position: \"absolute\",\n zIndex: \"inherit\",\n } as const,\n\n floating: {\n position: strategy,\n isolation: \"isolate\",\n minWidth: sameWidth ? undefined : \"max-content\",\n width: sameWidth ? \"var(--reference-width)\" : undefined,\n maxWidth: fitViewport ? \"var(--available-width)\" : undefined,\n maxHeight: fitViewport ? \"var(--available-height)\" : undefined,\n top: \"0px\",\n left: \"0px\",\n // move off-screen if placement is not defined\n transform: placement ? \"translate3d(var(--x), var(--y), 0)\" : \"translate3d(0, -100vh, 0)\",\n zIndex: \"var(--z-index)\",\n } as const,\n }\n}\n"],"mappings":"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","names":["arrow","shift"]}
|
package/src/get-anchor.ts
DELETED
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
import { isHTMLElement } from "@zag-js/dom-query"
|
|
2
|
-
import type { AnchorRect, MaybeRectElement } from "./types"
|
|
3
|
-
|
|
4
|
-
export function createDOMRect(x = 0, y = 0, width = 0, height = 0) {
|
|
5
|
-
if (typeof DOMRect === "function") {
|
|
6
|
-
return new DOMRect(x, y, width, height)
|
|
7
|
-
}
|
|
8
|
-
const rect = {
|
|
9
|
-
x,
|
|
10
|
-
y,
|
|
11
|
-
width,
|
|
12
|
-
height,
|
|
13
|
-
top: y,
|
|
14
|
-
right: x + width,
|
|
15
|
-
bottom: y + height,
|
|
16
|
-
left: x,
|
|
17
|
-
}
|
|
18
|
-
return { ...rect, toJSON: () => rect }
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
function getDOMRect(anchorRect?: AnchorRect | null) {
|
|
22
|
-
if (!anchorRect) return createDOMRect()
|
|
23
|
-
const { x, y, width, height } = anchorRect
|
|
24
|
-
return createDOMRect(x, y, width, height)
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
export function getAnchorElement(
|
|
28
|
-
anchorElement: MaybeRectElement,
|
|
29
|
-
getAnchorRect?: (anchor: MaybeRectElement) => AnchorRect | null,
|
|
30
|
-
) {
|
|
31
|
-
return {
|
|
32
|
-
contextElement: isHTMLElement(anchorElement) ? anchorElement : undefined,
|
|
33
|
-
getBoundingClientRect: () => {
|
|
34
|
-
const anchor = anchorElement
|
|
35
|
-
const anchorRect = getAnchorRect?.(anchor)
|
|
36
|
-
if (anchorRect || !anchor) {
|
|
37
|
-
return getDOMRect(anchorRect)
|
|
38
|
-
}
|
|
39
|
-
return anchor.getBoundingClientRect()
|
|
40
|
-
},
|
|
41
|
-
}
|
|
42
|
-
}
|
package/src/get-placement.ts
DELETED
|
@@ -1,209 +0,0 @@
|
|
|
1
|
-
import type { AutoUpdateOptions, Middleware } from "@floating-ui/dom"
|
|
2
|
-
import { arrow, autoUpdate, computePosition, flip, hide, limitShift, offset, shift, size } from "@floating-ui/dom"
|
|
3
|
-
import { getWindow, raf } from "@zag-js/dom-query"
|
|
4
|
-
import { compact, isNull, noop, runIfFn } from "@zag-js/utils"
|
|
5
|
-
import { getAnchorElement } from "./get-anchor"
|
|
6
|
-
import { rectMiddleware, shiftArrowMiddleware, transformOriginMiddleware } from "./middleware"
|
|
7
|
-
import { getPlacementDetails } from "./placement"
|
|
8
|
-
import type { MaybeElement, MaybeFn, MaybeRectElement, PositioningOptions } from "./types"
|
|
9
|
-
|
|
10
|
-
const defaultOptions: PositioningOptions = {
|
|
11
|
-
strategy: "absolute",
|
|
12
|
-
placement: "bottom",
|
|
13
|
-
listeners: true,
|
|
14
|
-
gutter: 8,
|
|
15
|
-
flip: true,
|
|
16
|
-
slide: true,
|
|
17
|
-
overlap: false,
|
|
18
|
-
sameWidth: false,
|
|
19
|
-
fitViewport: false,
|
|
20
|
-
overflowPadding: 8,
|
|
21
|
-
arrowPadding: 4,
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
function roundByDpr(win: Window, value: number) {
|
|
25
|
-
const dpr = win.devicePixelRatio || 1
|
|
26
|
-
return Math.round(value * dpr) / dpr
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
function getBoundaryMiddleware(opts: PositioningOptions) {
|
|
30
|
-
return runIfFn(opts.boundary)
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
function getArrowMiddleware(arrowElement: HTMLElement | null, opts: PositioningOptions) {
|
|
34
|
-
if (!arrowElement) return
|
|
35
|
-
return arrow({
|
|
36
|
-
element: arrowElement,
|
|
37
|
-
padding: opts.arrowPadding,
|
|
38
|
-
})
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
function getOffsetMiddleware(arrowElement: HTMLElement | null, opts: PositioningOptions) {
|
|
42
|
-
if (isNull(opts.offset ?? opts.gutter)) return
|
|
43
|
-
return offset(({ placement }) => {
|
|
44
|
-
const arrowOffset = (arrowElement?.clientHeight || 0) / 2
|
|
45
|
-
|
|
46
|
-
const gutter = opts.offset?.mainAxis ?? opts.gutter
|
|
47
|
-
const mainAxis = typeof gutter === "number" ? gutter + arrowOffset : (gutter ?? arrowOffset)
|
|
48
|
-
|
|
49
|
-
const { hasAlign } = getPlacementDetails(placement)
|
|
50
|
-
const shift = !hasAlign ? opts.shift : undefined
|
|
51
|
-
const crossAxis = opts.offset?.crossAxis ?? shift
|
|
52
|
-
|
|
53
|
-
return compact({
|
|
54
|
-
crossAxis: crossAxis,
|
|
55
|
-
mainAxis: mainAxis,
|
|
56
|
-
alignmentAxis: opts.shift,
|
|
57
|
-
})
|
|
58
|
-
})
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
function getFlipMiddleware(opts: PositioningOptions) {
|
|
62
|
-
if (!opts.flip) return
|
|
63
|
-
return flip({
|
|
64
|
-
boundary: getBoundaryMiddleware(opts),
|
|
65
|
-
padding: opts.overflowPadding,
|
|
66
|
-
fallbackPlacements: opts.flip === true ? undefined : opts.flip,
|
|
67
|
-
})
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
function getShiftMiddleware(opts: PositioningOptions) {
|
|
71
|
-
if (!opts.slide && !opts.overlap) return
|
|
72
|
-
return shift({
|
|
73
|
-
boundary: getBoundaryMiddleware(opts),
|
|
74
|
-
mainAxis: opts.slide,
|
|
75
|
-
crossAxis: opts.overlap,
|
|
76
|
-
padding: opts.overflowPadding,
|
|
77
|
-
limiter: limitShift(),
|
|
78
|
-
})
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
function getSizeMiddleware(opts: PositioningOptions) {
|
|
82
|
-
return size({
|
|
83
|
-
padding: opts.overflowPadding,
|
|
84
|
-
apply({ elements, rects, availableHeight, availableWidth }) {
|
|
85
|
-
const floating = elements.floating
|
|
86
|
-
|
|
87
|
-
const referenceWidth = Math.round(rects.reference.width)
|
|
88
|
-
availableWidth = Math.floor(availableWidth)
|
|
89
|
-
availableHeight = Math.floor(availableHeight)
|
|
90
|
-
|
|
91
|
-
floating.style.setProperty("--reference-width", `${referenceWidth}px`)
|
|
92
|
-
floating.style.setProperty("--available-width", `${availableWidth}px`)
|
|
93
|
-
floating.style.setProperty("--available-height", `${availableHeight}px`)
|
|
94
|
-
},
|
|
95
|
-
})
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
function hideWhenDetachedMiddleware(opts: PositioningOptions) {
|
|
99
|
-
if (!opts.hideWhenDetached) return
|
|
100
|
-
return hide({ strategy: "referenceHidden", boundary: opts.boundary?.() ?? "clippingAncestors" })
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
function getAutoUpdateOptions(opts?: boolean | AutoUpdateOptions): AutoUpdateOptions {
|
|
104
|
-
if (!opts) return {}
|
|
105
|
-
if (opts === true) {
|
|
106
|
-
return { ancestorResize: true, ancestorScroll: true, elementResize: true, layoutShift: true }
|
|
107
|
-
}
|
|
108
|
-
return opts
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
function getPlacementImpl(referenceOrVirtual: MaybeRectElement, floating: MaybeElement, opts: PositioningOptions = {}) {
|
|
112
|
-
const reference = getAnchorElement(referenceOrVirtual, opts.getAnchorRect)
|
|
113
|
-
if (!floating || !reference) return
|
|
114
|
-
const options = Object.assign({}, defaultOptions, opts)
|
|
115
|
-
|
|
116
|
-
/* -----------------------------------------------------------------------------
|
|
117
|
-
* The middleware stack
|
|
118
|
-
* -----------------------------------------------------------------------------*/
|
|
119
|
-
|
|
120
|
-
const arrowEl = floating.querySelector<HTMLElement>("[data-part=arrow]")
|
|
121
|
-
|
|
122
|
-
const middleware: (Middleware | undefined)[] = [
|
|
123
|
-
getOffsetMiddleware(arrowEl, options),
|
|
124
|
-
getFlipMiddleware(options),
|
|
125
|
-
getShiftMiddleware(options),
|
|
126
|
-
getArrowMiddleware(arrowEl, options),
|
|
127
|
-
shiftArrowMiddleware(arrowEl),
|
|
128
|
-
transformOriginMiddleware,
|
|
129
|
-
getSizeMiddleware(options),
|
|
130
|
-
hideWhenDetachedMiddleware(options),
|
|
131
|
-
rectMiddleware,
|
|
132
|
-
]
|
|
133
|
-
|
|
134
|
-
/* -----------------------------------------------------------------------------
|
|
135
|
-
* The actual positioning function
|
|
136
|
-
* -----------------------------------------------------------------------------*/
|
|
137
|
-
|
|
138
|
-
const { placement, strategy, onComplete, onPositioned } = options
|
|
139
|
-
|
|
140
|
-
const updatePosition = async () => {
|
|
141
|
-
if (!reference || !floating) return
|
|
142
|
-
|
|
143
|
-
const pos = await computePosition(reference, floating, {
|
|
144
|
-
placement,
|
|
145
|
-
middleware,
|
|
146
|
-
strategy,
|
|
147
|
-
})
|
|
148
|
-
|
|
149
|
-
onComplete?.(pos)
|
|
150
|
-
onPositioned?.({ placed: true })
|
|
151
|
-
|
|
152
|
-
const win = getWindow(floating)
|
|
153
|
-
const x = roundByDpr(win, pos.x)
|
|
154
|
-
const y = roundByDpr(win, pos.y)
|
|
155
|
-
|
|
156
|
-
floating.style.setProperty("--x", `${x}px`)
|
|
157
|
-
floating.style.setProperty("--y", `${y}px`)
|
|
158
|
-
|
|
159
|
-
if (options.hideWhenDetached && pos.middlewareData.hide?.referenceHidden) {
|
|
160
|
-
floating.style.setProperty("visibility", "hidden")
|
|
161
|
-
}
|
|
162
|
-
|
|
163
|
-
const contentEl = floating.firstElementChild
|
|
164
|
-
|
|
165
|
-
if (contentEl) {
|
|
166
|
-
const zIndex = win.getComputedStyle(contentEl).zIndex
|
|
167
|
-
floating.style.setProperty("--z-index", zIndex)
|
|
168
|
-
}
|
|
169
|
-
}
|
|
170
|
-
|
|
171
|
-
const update = async () => {
|
|
172
|
-
if (opts.updatePosition) {
|
|
173
|
-
await opts.updatePosition({ updatePosition })
|
|
174
|
-
onPositioned?.({ placed: true })
|
|
175
|
-
} else {
|
|
176
|
-
await updatePosition()
|
|
177
|
-
}
|
|
178
|
-
}
|
|
179
|
-
|
|
180
|
-
const autoUpdateOptions = getAutoUpdateOptions(options.listeners)
|
|
181
|
-
const cancelAutoUpdate = options.listeners ? autoUpdate(reference, floating, update, autoUpdateOptions) : noop
|
|
182
|
-
|
|
183
|
-
update()
|
|
184
|
-
|
|
185
|
-
return () => {
|
|
186
|
-
cancelAutoUpdate?.()
|
|
187
|
-
onPositioned?.({ placed: false })
|
|
188
|
-
}
|
|
189
|
-
}
|
|
190
|
-
|
|
191
|
-
export function getPlacement(
|
|
192
|
-
referenceOrFn: MaybeFn<MaybeRectElement>,
|
|
193
|
-
floatingOrFn: MaybeFn<MaybeElement>,
|
|
194
|
-
opts: PositioningOptions & { defer?: boolean } = {},
|
|
195
|
-
) {
|
|
196
|
-
const { defer, ...options } = opts
|
|
197
|
-
const func = defer ? raf : (v: any) => v()
|
|
198
|
-
const cleanups: (VoidFunction | undefined)[] = []
|
|
199
|
-
cleanups.push(
|
|
200
|
-
func(() => {
|
|
201
|
-
const reference = typeof referenceOrFn === "function" ? referenceOrFn() : referenceOrFn
|
|
202
|
-
const floating = typeof floatingOrFn === "function" ? floatingOrFn() : floatingOrFn
|
|
203
|
-
cleanups.push(getPlacementImpl(reference, floating, options))
|
|
204
|
-
}),
|
|
205
|
-
)
|
|
206
|
-
return () => {
|
|
207
|
-
cleanups.forEach((fn) => fn?.())
|
|
208
|
-
}
|
|
209
|
-
}
|
package/src/get-styles.ts
DELETED
|
@@ -1,56 +0,0 @@
|
|
|
1
|
-
import type { Placement } from "@floating-ui/dom"
|
|
2
|
-
import { cssVars } from "./middleware"
|
|
3
|
-
import type { PositioningOptions } from "./types"
|
|
4
|
-
|
|
5
|
-
export interface GetPlacementStylesOptions {
|
|
6
|
-
placement?: Placement
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
const ARROW_FLOATING_STYLE = {
|
|
10
|
-
bottom: "rotate(45deg)",
|
|
11
|
-
left: "rotate(135deg)",
|
|
12
|
-
top: "rotate(225deg)",
|
|
13
|
-
right: "rotate(315deg)",
|
|
14
|
-
} as const
|
|
15
|
-
|
|
16
|
-
export function getPlacementStyles(
|
|
17
|
-
options: Pick<PositioningOptions, "placement" | "sameWidth" | "fitViewport" | "strategy"> = {},
|
|
18
|
-
) {
|
|
19
|
-
const { placement, sameWidth, fitViewport, strategy = "absolute" } = options
|
|
20
|
-
|
|
21
|
-
return {
|
|
22
|
-
arrow: {
|
|
23
|
-
position: "absolute",
|
|
24
|
-
width: cssVars.arrowSize.reference,
|
|
25
|
-
height: cssVars.arrowSize.reference,
|
|
26
|
-
[cssVars.arrowSizeHalf.variable]: `calc(${cssVars.arrowSize.reference} / 2)`,
|
|
27
|
-
[cssVars.arrowOffset.variable]: `calc(${cssVars.arrowSizeHalf.reference} * -1)`,
|
|
28
|
-
} as const,
|
|
29
|
-
|
|
30
|
-
arrowTip: {
|
|
31
|
-
// @ts-expect-error - Fix this
|
|
32
|
-
transform: placement ? ARROW_FLOATING_STYLE[placement.split("-")[0]] : undefined,
|
|
33
|
-
background: cssVars.arrowBg.reference,
|
|
34
|
-
top: "0",
|
|
35
|
-
left: "0",
|
|
36
|
-
width: "100%",
|
|
37
|
-
height: "100%",
|
|
38
|
-
position: "absolute",
|
|
39
|
-
zIndex: "inherit",
|
|
40
|
-
} as const,
|
|
41
|
-
|
|
42
|
-
floating: {
|
|
43
|
-
position: strategy,
|
|
44
|
-
isolation: "isolate",
|
|
45
|
-
minWidth: sameWidth ? undefined : "max-content",
|
|
46
|
-
width: sameWidth ? "var(--reference-width)" : undefined,
|
|
47
|
-
maxWidth: fitViewport ? "var(--available-width)" : undefined,
|
|
48
|
-
maxHeight: fitViewport ? "var(--available-height)" : undefined,
|
|
49
|
-
top: "0px",
|
|
50
|
-
left: "0px",
|
|
51
|
-
// move off-screen if placement is not defined
|
|
52
|
-
transform: placement ? "translate3d(var(--x), var(--y), 0)" : "translate3d(0, -100vh, 0)",
|
|
53
|
-
zIndex: "var(--z-index)",
|
|
54
|
-
} as const,
|
|
55
|
-
}
|
|
56
|
-
}
|
package/src/index.ts
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
export { getPlacement } from "./get-placement"
|
|
2
|
-
export { getPlacementStyles, type GetPlacementStylesOptions } from "./get-styles"
|
|
3
|
-
export { getPlacementSide, isValidPlacement } from "./placement"
|
|
4
|
-
export type {
|
|
5
|
-
AnchorRect,
|
|
6
|
-
AutoUpdateOptions,
|
|
7
|
-
Boundary,
|
|
8
|
-
ComputePositionReturn,
|
|
9
|
-
Placement,
|
|
10
|
-
PlacementAlign,
|
|
11
|
-
PlacementSide,
|
|
12
|
-
PositioningOptions,
|
|
13
|
-
} from "./types"
|
package/src/middleware.ts
DELETED
|
@@ -1,87 +0,0 @@
|
|
|
1
|
-
import type { Coords, Middleware } from "@floating-ui/dom"
|
|
2
|
-
import type { PlacementSide } from "./types"
|
|
3
|
-
|
|
4
|
-
/* -----------------------------------------------------------------------------
|
|
5
|
-
* Shared middleware utils
|
|
6
|
-
* -----------------------------------------------------------------------------*/
|
|
7
|
-
|
|
8
|
-
const toVar = (value: string) => ({ variable: value, reference: `var(${value})` })
|
|
9
|
-
|
|
10
|
-
export const cssVars = {
|
|
11
|
-
arrowSize: toVar("--arrow-size"),
|
|
12
|
-
arrowSizeHalf: toVar("--arrow-size-half"),
|
|
13
|
-
arrowBg: toVar("--arrow-background"),
|
|
14
|
-
transformOrigin: toVar("--transform-origin"),
|
|
15
|
-
arrowOffset: toVar("--arrow-offset"),
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
/* -----------------------------------------------------------------------------
|
|
19
|
-
* Transform Origin Middleware
|
|
20
|
-
* -----------------------------------------------------------------------------*/
|
|
21
|
-
|
|
22
|
-
const getTransformOrigin = (arrow?: Partial<Coords>) => ({
|
|
23
|
-
top: "bottom center",
|
|
24
|
-
"top-start": arrow ? `${arrow.x}px bottom` : "left bottom",
|
|
25
|
-
"top-end": arrow ? `${arrow.x}px bottom` : "right bottom",
|
|
26
|
-
bottom: "top center",
|
|
27
|
-
"bottom-start": arrow ? `${arrow.x}px top` : "top left",
|
|
28
|
-
"bottom-end": arrow ? `${arrow.x}px top` : "top right",
|
|
29
|
-
left: "right center",
|
|
30
|
-
"left-start": arrow ? `right ${arrow.y}px` : "right top",
|
|
31
|
-
"left-end": arrow ? `right ${arrow.y}px` : "right bottom",
|
|
32
|
-
right: "left center",
|
|
33
|
-
"right-start": arrow ? `left ${arrow.y}px` : "left top",
|
|
34
|
-
"right-end": arrow ? `left ${arrow.y}px` : "left bottom",
|
|
35
|
-
})
|
|
36
|
-
|
|
37
|
-
export const transformOriginMiddleware: Middleware = {
|
|
38
|
-
name: "transformOrigin",
|
|
39
|
-
fn({ placement, elements, middlewareData }) {
|
|
40
|
-
const { arrow } = middlewareData
|
|
41
|
-
const transformOrigin = getTransformOrigin(arrow)[placement]
|
|
42
|
-
|
|
43
|
-
const { floating } = elements
|
|
44
|
-
floating.style.setProperty(cssVars.transformOrigin.variable, transformOrigin)
|
|
45
|
-
|
|
46
|
-
return {
|
|
47
|
-
data: { transformOrigin },
|
|
48
|
-
}
|
|
49
|
-
},
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
/* -----------------------------------------------------------------------------
|
|
53
|
-
* Rect Middleware (to expose the rect data)
|
|
54
|
-
* -----------------------------------------------------------------------------*/
|
|
55
|
-
|
|
56
|
-
export const rectMiddleware: Middleware = {
|
|
57
|
-
name: "rects",
|
|
58
|
-
fn({ rects }) {
|
|
59
|
-
return {
|
|
60
|
-
data: rects,
|
|
61
|
-
}
|
|
62
|
-
},
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
/* -----------------------------------------------------------------------------
|
|
66
|
-
* Arrow Middleware
|
|
67
|
-
* -----------------------------------------------------------------------------*/
|
|
68
|
-
|
|
69
|
-
export const shiftArrowMiddleware = (arrowEl: HTMLElement | null): Middleware | undefined => {
|
|
70
|
-
if (!arrowEl) return
|
|
71
|
-
return {
|
|
72
|
-
name: "shiftArrow",
|
|
73
|
-
fn({ placement, middlewareData }) {
|
|
74
|
-
if (!middlewareData.arrow) return {}
|
|
75
|
-
const { x, y } = middlewareData.arrow
|
|
76
|
-
const dir = placement.split("-")[0] as PlacementSide
|
|
77
|
-
|
|
78
|
-
Object.assign(arrowEl.style, {
|
|
79
|
-
left: x != null ? `${x}px` : "",
|
|
80
|
-
top: y != null ? `${y}px` : "",
|
|
81
|
-
[dir]: `calc(100% + ${cssVars.arrowOffset.reference})`,
|
|
82
|
-
})
|
|
83
|
-
|
|
84
|
-
return {}
|
|
85
|
-
},
|
|
86
|
-
}
|
|
87
|
-
}
|
package/src/placement.ts
DELETED
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import type { Placement } from "@floating-ui/dom"
|
|
2
|
-
import type { PlacementAlign, PlacementSide } from "./types"
|
|
3
|
-
|
|
4
|
-
export function isValidPlacement(v: string): v is Placement {
|
|
5
|
-
return /^(?:top|bottom|left|right)(?:-(?:start|end))?$/.test(v)
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
export function getPlacementDetails(placement: Placement) {
|
|
9
|
-
const [side, align] = placement.split("-") as [PlacementSide, PlacementAlign | undefined]
|
|
10
|
-
return { side, align, hasAlign: align != null }
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
export function getPlacementSide(placement: Placement): PlacementSide {
|
|
14
|
-
return placement.split("-")[0] as PlacementSide
|
|
15
|
-
}
|
package/src/types.ts
DELETED
|
@@ -1,101 +0,0 @@
|
|
|
1
|
-
import type { AutoUpdateOptions, Boundary, ComputePositionReturn, Placement, VirtualElement } from "@floating-ui/dom"
|
|
2
|
-
|
|
3
|
-
export type MaybeRectElement = HTMLElement | VirtualElement | null
|
|
4
|
-
|
|
5
|
-
export type MaybeElement = HTMLElement | null
|
|
6
|
-
|
|
7
|
-
export type MaybeFn<T> = T | (() => T)
|
|
8
|
-
|
|
9
|
-
export type PlacementSide = "top" | "right" | "bottom" | "left"
|
|
10
|
-
export type PlacementAlign = "start" | "center" | "end"
|
|
11
|
-
|
|
12
|
-
export interface AnchorRect {
|
|
13
|
-
x?: number
|
|
14
|
-
y?: number
|
|
15
|
-
width?: number
|
|
16
|
-
height?: number
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
export interface PositioningOptions {
|
|
20
|
-
/**
|
|
21
|
-
* Whether the popover should be hidden when the reference element is detached
|
|
22
|
-
*/
|
|
23
|
-
hideWhenDetached?: boolean
|
|
24
|
-
/**
|
|
25
|
-
* The strategy to use for positioning
|
|
26
|
-
*/
|
|
27
|
-
strategy?: "absolute" | "fixed"
|
|
28
|
-
/**
|
|
29
|
-
* The initial placement of the floating element
|
|
30
|
-
*/
|
|
31
|
-
placement?: Placement
|
|
32
|
-
/**
|
|
33
|
-
* The offset of the floating element
|
|
34
|
-
*/
|
|
35
|
-
offset?: { mainAxis?: number; crossAxis?: number }
|
|
36
|
-
/**
|
|
37
|
-
* The main axis offset or gap between the reference and floating elements
|
|
38
|
-
*/
|
|
39
|
-
gutter?: number
|
|
40
|
-
/**
|
|
41
|
-
* The secondary axis offset or gap between the reference and floating elements
|
|
42
|
-
*/
|
|
43
|
-
shift?: number
|
|
44
|
-
/**
|
|
45
|
-
* The virtual padding around the viewport edges to check for overflow
|
|
46
|
-
*/
|
|
47
|
-
overflowPadding?: number
|
|
48
|
-
/**
|
|
49
|
-
* The minimum padding between the arrow and the floating element's corner.
|
|
50
|
-
* @default 4
|
|
51
|
-
*/
|
|
52
|
-
arrowPadding?: number
|
|
53
|
-
/**
|
|
54
|
-
* Whether to flip the placement
|
|
55
|
-
*/
|
|
56
|
-
flip?: boolean | Placement[]
|
|
57
|
-
/**
|
|
58
|
-
* Whether the popover should slide when it overflows.
|
|
59
|
-
*/
|
|
60
|
-
slide?: boolean
|
|
61
|
-
/**
|
|
62
|
-
* Whether the floating element can overlap the reference element
|
|
63
|
-
* @default false
|
|
64
|
-
*/
|
|
65
|
-
overlap?: boolean
|
|
66
|
-
/**
|
|
67
|
-
* Whether to make the floating element same width as the reference element
|
|
68
|
-
*/
|
|
69
|
-
sameWidth?: boolean
|
|
70
|
-
/**
|
|
71
|
-
* Whether the popover should fit the viewport.
|
|
72
|
-
*/
|
|
73
|
-
fitViewport?: boolean
|
|
74
|
-
/**
|
|
75
|
-
* The overflow boundary of the reference element
|
|
76
|
-
*/
|
|
77
|
-
boundary?: () => Boundary
|
|
78
|
-
/**
|
|
79
|
-
* Options to activate auto-update listeners
|
|
80
|
-
*/
|
|
81
|
-
listeners?: boolean | AutoUpdateOptions
|
|
82
|
-
/**
|
|
83
|
-
* Function called when the placement is computed
|
|
84
|
-
*/
|
|
85
|
-
onComplete?(data: ComputePositionReturn): void
|
|
86
|
-
/**
|
|
87
|
-
* Function called when the floating element is positioned or not
|
|
88
|
-
*/
|
|
89
|
-
onPositioned?(data: { placed: boolean }): void
|
|
90
|
-
/**
|
|
91
|
-
* Function that returns the anchor rect
|
|
92
|
-
*/
|
|
93
|
-
getAnchorRect?: (element: HTMLElement | VirtualElement | null) => AnchorRect | null
|
|
94
|
-
/**
|
|
95
|
-
* A callback that will be called when the popover needs to calculate its
|
|
96
|
-
* position.
|
|
97
|
-
*/
|
|
98
|
-
updatePosition?: (data: { updatePosition: () => Promise<void> }) => void | Promise<void>
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
export type { AutoUpdateOptions, Boundary, ComputePositionReturn, Placement }
|