@zag-js/popper 0.1.8 → 0.1.11

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/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2021 Chakra UI
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/dist/index.d.ts CHANGED
@@ -1,3 +1,109 @@
1
- export { getPlacement, getBasePlacement } from "./get-placement";
2
- export { getPlacementStyles } from "./get-styles";
3
- export type { Placement, PositioningOptions } from "./types";
1
+ import { Placement, Boundary, ComputePositionReturn, ComputePositionConfig, VirtualElement } from '@floating-ui/dom';
2
+ export { Placement } from '@floating-ui/dom';
3
+
4
+ declare type AutoUpdateOptions = {
5
+ ancestorScroll?: boolean;
6
+ ancestorResize?: boolean;
7
+ referenceResize?: boolean;
8
+ };
9
+
10
+ declare type PositioningOptions = {
11
+ /**
12
+ * The strategy to use for positioning
13
+ */
14
+ strategy?: "absolute" | "fixed";
15
+ /**
16
+ * The initial placement of the floating element
17
+ */
18
+ placement?: Placement;
19
+ /**
20
+ * The offset of the floating element
21
+ */
22
+ offset?: {
23
+ mainAxis?: number;
24
+ crossAxis?: number;
25
+ };
26
+ /**
27
+ * The main axis offset or gap between the reference and floating elements
28
+ */
29
+ gutter?: number;
30
+ /**
31
+ * The virtual padding around the viewport edges to check for overflow
32
+ */
33
+ overflowPadding?: number;
34
+ /**
35
+ * Whether to flip the placement
36
+ */
37
+ flip?: boolean;
38
+ /**
39
+ * Whether the floating element can overlap the reference element
40
+ * @default false
41
+ */
42
+ overlap?: boolean;
43
+ /**
44
+ * Whether to make the floating element same width as the reference element
45
+ */
46
+ sameWidth?: boolean;
47
+ /**
48
+ * Whether the popover should fit the viewport.
49
+ */
50
+ fitViewport?: boolean;
51
+ /**
52
+ * The overflow boundary of the reference element
53
+ */
54
+ boundary?: Boundary;
55
+ /**
56
+ * Options to activate auto-update listeners
57
+ */
58
+ listeners?: boolean | AutoUpdateOptions;
59
+ /**
60
+ * Function called when the placement is computed
61
+ */
62
+ onComplete?(data: ComputePositionReturn & {
63
+ compute: (config?: Omit<ComputePositionConfig, "platform">) => void;
64
+ }): void;
65
+ /**
66
+ * Function called on cleanup of all listeners
67
+ */
68
+ onCleanup?: VoidFunction;
69
+ };
70
+ declare type BasePlacement = "top" | "right" | "bottom" | "left";
71
+
72
+ declare function getPlacement(reference: HTMLElement | VirtualElement | null, floating: HTMLElement | null, opts?: PositioningOptions): (() => void) | undefined;
73
+ declare function getBasePlacement(placement: Placement): BasePlacement;
74
+
75
+ declare type Options = {
76
+ measured: boolean;
77
+ strategy?: "absolute" | "fixed";
78
+ placement?: Placement;
79
+ };
80
+ declare function getPlacementStyles(options: Options): {
81
+ arrow: {
82
+ readonly [x: string]: string | 0 | undefined;
83
+ readonly position: "absolute";
84
+ readonly width: string;
85
+ readonly height: string;
86
+ readonly opacity: 0 | undefined;
87
+ };
88
+ innerArrow: {
89
+ readonly transform: any;
90
+ readonly background: string;
91
+ readonly top: "0";
92
+ readonly left: "0";
93
+ readonly width: "100%";
94
+ readonly height: "100%";
95
+ readonly position: "absolute";
96
+ readonly zIndex: "inherit";
97
+ };
98
+ floating: {
99
+ position: "absolute" | "fixed";
100
+ readonly top?: 0 | undefined;
101
+ readonly left?: 0 | undefined;
102
+ readonly opacity?: 0 | undefined;
103
+ readonly transform?: "translate3d(0, -200%, 0)" | undefined;
104
+ readonly pointerEvents?: "none" | undefined;
105
+ readonly minWidth: "max-content";
106
+ };
107
+ };
108
+
109
+ export { PositioningOptions, getBasePlacement, getPlacement, getPlacementStyles };
package/dist/index.js CHANGED
@@ -1,25 +1,8 @@
1
1
  "use strict";
2
2
  var __defProp = Object.defineProperty;
3
- var __defProps = Object.defineProperties;
4
3
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
- var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
6
4
  var __getOwnPropNames = Object.getOwnPropertyNames;
7
- var __getOwnPropSymbols = Object.getOwnPropertySymbols;
8
5
  var __hasOwnProp = Object.prototype.hasOwnProperty;
9
- var __propIsEnum = Object.prototype.propertyIsEnumerable;
10
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
11
- var __spreadValues = (a, b) => {
12
- for (var prop in b || (b = {}))
13
- if (__hasOwnProp.call(b, prop))
14
- __defNormalProp(a, prop, b[prop]);
15
- if (__getOwnPropSymbols)
16
- for (var prop of __getOwnPropSymbols(b)) {
17
- if (__propIsEnum.call(b, prop))
18
- __defNormalProp(a, prop, b[prop]);
19
- }
20
- return a;
21
- };
22
- var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
23
6
  var __export = (target, all) => {
24
7
  for (var name in all)
25
8
  __defProp(target, name, { get: all[name], enumerable: true });
@@ -60,7 +43,7 @@ var import_dom = require("@floating-ui/dom");
60
43
  // ../dom/dist/index.mjs
61
44
  var runIfFn = (v, ...a) => {
62
45
  const res = typeof v === "function" ? v(...a) : v;
63
- return res != null ? res : void 0;
46
+ return res ?? void 0;
64
47
  };
65
48
  var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
66
49
  function isHTMLElement(v) {
@@ -129,12 +112,11 @@ function isEqual(rect1, rect2) {
129
112
 
130
113
  // src/auto-update.ts
131
114
  function resolveOptions(option) {
132
- var _a, _b, _c;
133
115
  const bool = isBoolean(option);
134
116
  return {
135
- ancestorResize: bool ? option : (_a = option.ancestorResize) != null ? _a : true,
136
- ancestorScroll: bool ? option : (_b = option.ancestorScroll) != null ? _b : true,
137
- referenceResize: bool ? option : (_c = option.referenceResize) != null ? _c : true
117
+ ancestorResize: bool ? option : option.ancestorResize ?? true,
118
+ ancestorScroll: bool ? option : option.ancestorScroll ?? true,
119
+ referenceResize: bool ? option : option.referenceResize ?? true
138
120
  };
139
121
  }
140
122
  function autoUpdate(reference, floating, update, options = false) {
@@ -227,10 +209,12 @@ function getPlacement(reference, floating, opts = {}) {
227
209
  const arrowEl = floating.querySelector("[data-part=arrow]");
228
210
  const middleware = [];
229
211
  if (options.flip) {
230
- middleware.push((0, import_dom2.flip)({
231
- boundary: options.boundary,
232
- padding: options.overflowPadding
233
- }));
212
+ middleware.push(
213
+ (0, import_dom2.flip)({
214
+ boundary: options.boundary,
215
+ padding: options.overflowPadding
216
+ })
217
+ );
234
218
  }
235
219
  if (options.gutter || options.offset) {
236
220
  const arrowOffset = arrowEl ? arrowEl.offsetHeight / 2 : 0;
@@ -239,45 +223,53 @@ function getPlacement(reference, floating, opts = {}) {
239
223
  data.mainAxis += arrowOffset;
240
224
  middleware.push((0, import_dom2.offset)(data));
241
225
  }
242
- middleware.push((0, import_dom2.shift)({
243
- boundary: options.boundary,
244
- crossAxis: options.overlap,
245
- padding: options.overflowPadding
246
- }));
226
+ middleware.push(
227
+ (0, import_dom2.shift)({
228
+ boundary: options.boundary,
229
+ crossAxis: options.overlap,
230
+ padding: options.overflowPadding
231
+ })
232
+ );
247
233
  if (arrowEl) {
248
- middleware.push((0, import_dom2.arrow)({ element: arrowEl, padding: 8 }), shiftArrow({ element: arrowEl }));
234
+ middleware.push(
235
+ (0, import_dom2.arrow)({ element: arrowEl, padding: 8 }),
236
+ shiftArrow({ element: arrowEl })
237
+ );
249
238
  }
250
239
  middleware.push(transformOrigin);
251
- middleware.push((0, import_dom2.size)({
252
- padding: options.overflowPadding,
253
- apply({ rects, availableHeight, availableWidth }) {
254
- const referenceWidth = Math.round(rects.reference.width);
255
- floating.style.setProperty("--reference-width", `${referenceWidth}px`);
256
- floating.style.setProperty("--available-width", `${availableWidth}px`);
257
- floating.style.setProperty("--available-height", `${availableHeight}px`);
258
- if (options.sameWidth) {
259
- Object.assign(floating.style, {
260
- width: `${referenceWidth}px`,
261
- minWidth: "unset"
262
- });
263
- }
264
- if (options.fitViewport) {
265
- Object.assign(floating.style, {
266
- maxWidth: `${availableWidth}px`,
267
- maxHeight: `${availableHeight}px`
268
- });
240
+ middleware.push(
241
+ (0, import_dom2.size)({
242
+ padding: options.overflowPadding,
243
+ apply({ rects, availableHeight, availableWidth }) {
244
+ const referenceWidth = Math.round(rects.reference.width);
245
+ floating.style.setProperty("--reference-width", `${referenceWidth}px`);
246
+ floating.style.setProperty("--available-width", `${availableWidth}px`);
247
+ floating.style.setProperty("--available-height", `${availableHeight}px`);
248
+ if (options.sameWidth) {
249
+ Object.assign(floating.style, {
250
+ width: `${referenceWidth}px`,
251
+ minWidth: "unset"
252
+ });
253
+ }
254
+ if (options.fitViewport) {
255
+ Object.assign(floating.style, {
256
+ maxWidth: `${availableWidth}px`,
257
+ maxHeight: `${availableHeight}px`
258
+ });
259
+ }
269
260
  }
270
- }
271
- }));
261
+ })
262
+ );
272
263
  function compute(config = {}) {
273
264
  if (!reference || !floating)
274
265
  return;
275
266
  const { placement, strategy } = options;
276
- (0, import_dom2.computePosition)(reference, floating, __spreadValues({
267
+ (0, import_dom2.computePosition)(reference, floating, {
277
268
  placement,
278
269
  middleware,
279
- strategy
280
- }, config)).then((data) => {
270
+ strategy,
271
+ ...config
272
+ }).then((data) => {
281
273
  var _a;
282
274
  const x = Math.round(data.x);
283
275
  const y = Math.round(data.y);
@@ -287,11 +279,14 @@ function getPlacement(reference, floating, opts = {}) {
287
279
  left: "0",
288
280
  transform: `translate3d(${x}px, ${y}px, 0)`
289
281
  });
290
- (_a = options.onComplete) == null ? void 0 : _a.call(options, __spreadProps(__spreadValues({}, data), { compute }));
282
+ (_a = options.onComplete) == null ? void 0 : _a.call(options, { ...data, compute });
291
283
  });
292
284
  }
293
285
  compute();
294
- return callAll(options.listeners ? autoUpdate(reference, floating, compute, options.listeners) : void 0, options.onCleanup);
286
+ return callAll(
287
+ options.listeners ? autoUpdate(reference, floating, compute, options.listeners) : void 0,
288
+ options.onCleanup
289
+ );
295
290
  }
296
291
  function getBasePlacement(placement) {
297
292
  return placement.split("-")[0];
@@ -333,9 +328,16 @@ function getPlacementStyles(options) {
333
328
  position: "absolute",
334
329
  zIndex: "inherit"
335
330
  },
336
- floating: __spreadValues({
331
+ floating: {
337
332
  position: strategy,
338
- minWidth: "max-content"
339
- }, !measured && UNMEASURED_FLOATING_STYLE)
333
+ minWidth: "max-content",
334
+ ...!measured && UNMEASURED_FLOATING_STYLE
335
+ }
340
336
  };
341
337
  }
338
+ // Annotate the CommonJS export names for ESM import in node:
339
+ 0 && (module.exports = {
340
+ getBasePlacement,
341
+ getPlacement,
342
+ getPlacementStyles
343
+ });
package/dist/index.mjs CHANGED
@@ -1,23 +1,3 @@
1
- var __defProp = Object.defineProperty;
2
- var __defProps = Object.defineProperties;
3
- var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
4
- var __getOwnPropSymbols = Object.getOwnPropertySymbols;
5
- var __hasOwnProp = Object.prototype.hasOwnProperty;
6
- var __propIsEnum = Object.prototype.propertyIsEnumerable;
7
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
8
- var __spreadValues = (a, b) => {
9
- for (var prop in b || (b = {}))
10
- if (__hasOwnProp.call(b, prop))
11
- __defNormalProp(a, prop, b[prop]);
12
- if (__getOwnPropSymbols)
13
- for (var prop of __getOwnPropSymbols(b)) {
14
- if (__propIsEnum.call(b, prop))
15
- __defNormalProp(a, prop, b[prop]);
16
- }
17
- return a;
18
- };
19
- var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
20
-
21
1
  // src/get-placement.ts
22
2
  import { arrow, computePosition, flip, offset, shift, size } from "@floating-ui/dom";
23
3
 
@@ -35,7 +15,7 @@ import { getOverflowAncestors } from "@floating-ui/dom";
35
15
  // ../dom/dist/index.mjs
36
16
  var runIfFn = (v, ...a) => {
37
17
  const res = typeof v === "function" ? v(...a) : v;
38
- return res != null ? res : void 0;
18
+ return res ?? void 0;
39
19
  };
40
20
  var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
41
21
  function isHTMLElement(v) {
@@ -104,12 +84,11 @@ function isEqual(rect1, rect2) {
104
84
 
105
85
  // src/auto-update.ts
106
86
  function resolveOptions(option) {
107
- var _a, _b, _c;
108
87
  const bool = isBoolean(option);
109
88
  return {
110
- ancestorResize: bool ? option : (_a = option.ancestorResize) != null ? _a : true,
111
- ancestorScroll: bool ? option : (_b = option.ancestorScroll) != null ? _b : true,
112
- referenceResize: bool ? option : (_c = option.referenceResize) != null ? _c : true
89
+ ancestorResize: bool ? option : option.ancestorResize ?? true,
90
+ ancestorScroll: bool ? option : option.ancestorScroll ?? true,
91
+ referenceResize: bool ? option : option.referenceResize ?? true
113
92
  };
114
93
  }
115
94
  function autoUpdate(reference, floating, update, options = false) {
@@ -202,10 +181,12 @@ function getPlacement(reference, floating, opts = {}) {
202
181
  const arrowEl = floating.querySelector("[data-part=arrow]");
203
182
  const middleware = [];
204
183
  if (options.flip) {
205
- middleware.push(flip({
206
- boundary: options.boundary,
207
- padding: options.overflowPadding
208
- }));
184
+ middleware.push(
185
+ flip({
186
+ boundary: options.boundary,
187
+ padding: options.overflowPadding
188
+ })
189
+ );
209
190
  }
210
191
  if (options.gutter || options.offset) {
211
192
  const arrowOffset = arrowEl ? arrowEl.offsetHeight / 2 : 0;
@@ -214,45 +195,53 @@ function getPlacement(reference, floating, opts = {}) {
214
195
  data.mainAxis += arrowOffset;
215
196
  middleware.push(offset(data));
216
197
  }
217
- middleware.push(shift({
218
- boundary: options.boundary,
219
- crossAxis: options.overlap,
220
- padding: options.overflowPadding
221
- }));
198
+ middleware.push(
199
+ shift({
200
+ boundary: options.boundary,
201
+ crossAxis: options.overlap,
202
+ padding: options.overflowPadding
203
+ })
204
+ );
222
205
  if (arrowEl) {
223
- middleware.push(arrow({ element: arrowEl, padding: 8 }), shiftArrow({ element: arrowEl }));
206
+ middleware.push(
207
+ arrow({ element: arrowEl, padding: 8 }),
208
+ shiftArrow({ element: arrowEl })
209
+ );
224
210
  }
225
211
  middleware.push(transformOrigin);
226
- middleware.push(size({
227
- padding: options.overflowPadding,
228
- apply({ rects, availableHeight, availableWidth }) {
229
- const referenceWidth = Math.round(rects.reference.width);
230
- floating.style.setProperty("--reference-width", `${referenceWidth}px`);
231
- floating.style.setProperty("--available-width", `${availableWidth}px`);
232
- floating.style.setProperty("--available-height", `${availableHeight}px`);
233
- if (options.sameWidth) {
234
- Object.assign(floating.style, {
235
- width: `${referenceWidth}px`,
236
- minWidth: "unset"
237
- });
238
- }
239
- if (options.fitViewport) {
240
- Object.assign(floating.style, {
241
- maxWidth: `${availableWidth}px`,
242
- maxHeight: `${availableHeight}px`
243
- });
212
+ middleware.push(
213
+ size({
214
+ padding: options.overflowPadding,
215
+ apply({ rects, availableHeight, availableWidth }) {
216
+ const referenceWidth = Math.round(rects.reference.width);
217
+ floating.style.setProperty("--reference-width", `${referenceWidth}px`);
218
+ floating.style.setProperty("--available-width", `${availableWidth}px`);
219
+ floating.style.setProperty("--available-height", `${availableHeight}px`);
220
+ if (options.sameWidth) {
221
+ Object.assign(floating.style, {
222
+ width: `${referenceWidth}px`,
223
+ minWidth: "unset"
224
+ });
225
+ }
226
+ if (options.fitViewport) {
227
+ Object.assign(floating.style, {
228
+ maxWidth: `${availableWidth}px`,
229
+ maxHeight: `${availableHeight}px`
230
+ });
231
+ }
244
232
  }
245
- }
246
- }));
233
+ })
234
+ );
247
235
  function compute(config = {}) {
248
236
  if (!reference || !floating)
249
237
  return;
250
238
  const { placement, strategy } = options;
251
- computePosition(reference, floating, __spreadValues({
239
+ computePosition(reference, floating, {
252
240
  placement,
253
241
  middleware,
254
- strategy
255
- }, config)).then((data) => {
242
+ strategy,
243
+ ...config
244
+ }).then((data) => {
256
245
  var _a;
257
246
  const x = Math.round(data.x);
258
247
  const y = Math.round(data.y);
@@ -262,11 +251,14 @@ function getPlacement(reference, floating, opts = {}) {
262
251
  left: "0",
263
252
  transform: `translate3d(${x}px, ${y}px, 0)`
264
253
  });
265
- (_a = options.onComplete) == null ? void 0 : _a.call(options, __spreadProps(__spreadValues({}, data), { compute }));
254
+ (_a = options.onComplete) == null ? void 0 : _a.call(options, { ...data, compute });
266
255
  });
267
256
  }
268
257
  compute();
269
- return callAll(options.listeners ? autoUpdate(reference, floating, compute, options.listeners) : void 0, options.onCleanup);
258
+ return callAll(
259
+ options.listeners ? autoUpdate(reference, floating, compute, options.listeners) : void 0,
260
+ options.onCleanup
261
+ );
270
262
  }
271
263
  function getBasePlacement(placement) {
272
264
  return placement.split("-")[0];
@@ -308,10 +300,11 @@ function getPlacementStyles(options) {
308
300
  position: "absolute",
309
301
  zIndex: "inherit"
310
302
  },
311
- floating: __spreadValues({
303
+ floating: {
312
304
  position: strategy,
313
- minWidth: "max-content"
314
- }, !measured && UNMEASURED_FLOATING_STYLE)
305
+ minWidth: "max-content",
306
+ ...!measured && UNMEASURED_FLOATING_STYLE
307
+ }
315
308
  };
316
309
  }
317
310
  export {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zag-js/popper",
3
- "version": "0.1.8",
3
+ "version": "0.1.11",
4
4
  "description": "Dynamic positioning logic for ui machines",
5
5
  "keywords": [
6
6
  "js",
@@ -25,17 +25,20 @@
25
25
  "url": "https://github.com/chakra-ui/zag/issues"
26
26
  },
27
27
  "dependencies": {
28
- "@floating-ui/dom": "0.5.4",
29
- "@zag-js/dom-utils": "0.1.7",
30
- "@zag-js/utils": "0.1.2"
28
+ "@floating-ui/dom": "1.0.1"
29
+ },
30
+ "devDependencies": {
31
+ "@zag-js/dom-utils": "0.1.11",
32
+ "@zag-js/utils": "0.1.4"
31
33
  },
32
34
  "scripts": {
33
- "build:fast": "zag build",
34
- "start": "zag build --watch",
35
- "build": "zag build --prod",
35
+ "build-fast": "tsup src/index.ts --format=esm,cjs",
36
+ "start": "pnpm build --watch",
37
+ "build": "tsup src/index.ts --format=esm,cjs --dts",
36
38
  "test": "jest --config ../../../jest.config.js --rootDir . --passWithNoTests",
37
39
  "lint": "eslint src --ext .ts,.tsx",
38
- "test:ci": "yarn test --ci --runInBand",
39
- "test:watch": "yarn test --watch --updateSnapshot"
40
+ "test-ci": "pnpm test --ci --runInBand",
41
+ "test-watch": "pnpm test --watch -u",
42
+ "typecheck": "tsc --noEmit"
40
43
  }
41
- }
44
+ }
@@ -1,8 +0,0 @@
1
- import type { Placement, ReferenceElement } from "@floating-ui/dom";
2
- export type { Placement };
3
- export declare type AutoUpdateOptions = {
4
- ancestorScroll?: boolean;
5
- ancestorResize?: boolean;
6
- referenceResize?: boolean;
7
- };
8
- export declare function autoUpdate(reference: ReferenceElement, floating: HTMLElement, update: () => void, options?: boolean | AutoUpdateOptions): () => void;
@@ -1,4 +0,0 @@
1
- import type { Placement, VirtualElement } from "@floating-ui/dom";
2
- import type { BasePlacement, PositioningOptions } from "./types";
3
- export declare function getPlacement(reference: HTMLElement | VirtualElement | null, floating: HTMLElement | null, opts?: PositioningOptions): () => void;
4
- export declare function getBasePlacement(placement: Placement): BasePlacement;
@@ -1,35 +0,0 @@
1
- import type { Placement } from "@floating-ui/dom";
2
- declare type Options = {
3
- measured: boolean;
4
- strategy?: "absolute" | "fixed";
5
- placement?: Placement;
6
- };
7
- export declare function getPlacementStyles(options: Options): {
8
- arrow: {
9
- readonly [x: string]: string | 0;
10
- readonly position: "absolute";
11
- readonly width: string;
12
- readonly height: string;
13
- readonly opacity: 0;
14
- };
15
- innerArrow: {
16
- readonly transform: any;
17
- readonly background: string;
18
- readonly top: "0";
19
- readonly left: "0";
20
- readonly width: "100%";
21
- readonly height: "100%";
22
- readonly position: "absolute";
23
- readonly zIndex: "inherit";
24
- };
25
- floating: {
26
- readonly position: "fixed";
27
- readonly top: 0;
28
- readonly left: 0;
29
- readonly opacity: 0;
30
- readonly transform: "translate3d(0, -200%, 0)";
31
- readonly pointerEvents: "none";
32
- readonly minWidth: "max-content";
33
- };
34
- };
35
- export {};
@@ -1,29 +0,0 @@
1
- import type { Middleware } from "@floating-ui/dom";
2
- export declare const cssVars: {
3
- arrowSize: {
4
- variable: string;
5
- reference: string;
6
- };
7
- arrowSizeHalf: {
8
- variable: string;
9
- reference: string;
10
- };
11
- arrowBg: {
12
- variable: string;
13
- reference: string;
14
- };
15
- transformOrigin: {
16
- variable: string;
17
- reference: string;
18
- };
19
- arrowOffset: {
20
- variable: string;
21
- reference: string;
22
- };
23
- };
24
- export declare const transformOrigin: Middleware;
25
- declare type ArrowOptions = {
26
- element: HTMLElement;
27
- };
28
- export declare const shiftArrow: (opts: ArrowOptions) => Middleware;
29
- export {};
package/dist/types.d.ts DELETED
@@ -1,64 +0,0 @@
1
- import type { Boundary, Placement, ComputePositionReturn, ComputePositionConfig } from "@floating-ui/dom";
2
- import type { AutoUpdateOptions } from "./auto-update";
3
- export type { Placement };
4
- export declare type PositioningOptions = {
5
- /**
6
- * The strategy to use for positioning
7
- */
8
- strategy?: "absolute" | "fixed";
9
- /**
10
- * The initial placement of the floating element
11
- */
12
- placement?: Placement;
13
- /**
14
- * The offset of the floating element
15
- */
16
- offset?: {
17
- mainAxis?: number;
18
- crossAxis?: number;
19
- };
20
- /**
21
- * The main axis offset or gap between the reference and floating elements
22
- */
23
- gutter?: number;
24
- /**
25
- * The virtual padding around the viewport edges to check for overflow
26
- */
27
- overflowPadding?: number;
28
- /**
29
- * Whether to flip the placement
30
- */
31
- flip?: boolean;
32
- /**
33
- * Whether the floating element can overlap the reference element
34
- * @default false
35
- */
36
- overlap?: boolean;
37
- /**
38
- * Whether to make the floating element same width as the reference element
39
- */
40
- sameWidth?: boolean;
41
- /**
42
- * Whether the popover should fit the viewport.
43
- */
44
- fitViewport?: boolean;
45
- /**
46
- * The overflow boundary of the reference element
47
- */
48
- boundary?: Boundary;
49
- /**
50
- * Options to activate auto-update listeners
51
- */
52
- listeners?: boolean | AutoUpdateOptions;
53
- /**
54
- * Function called when the placement is computed
55
- */
56
- onComplete?(data: ComputePositionReturn & {
57
- compute: (config?: Omit<ComputePositionConfig, "platform">) => void;
58
- }): void;
59
- /**
60
- * Function called on cleanup of all listeners
61
- */
62
- onCleanup?: VoidFunction;
63
- };
64
- export declare type BasePlacement = "top" | "right" | "bottom" | "left";