@zag-js/popper 0.11.1 → 0.11.2
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.d.mts +4 -4
- package/dist/index.d.ts +4 -4
- package/dist/index.js.map +1 -1
- package/dist/index.mjs.map +1 -1
- package/package.json +4 -4
- package/src/get-placement.ts +1 -1
- package/src/get-styles.ts +2 -2
- package/src/index.ts +10 -3
- package/src/types.ts +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Placement, Boundary, ComputePositionReturn, VirtualElement } from '@floating-ui/dom';
|
|
2
|
-
export { Placement } from '@floating-ui/dom';
|
|
2
|
+
export { Boundary, ComputePositionReturn, Placement } from '@floating-ui/dom';
|
|
3
3
|
|
|
4
4
|
type AutoUpdateOptions = {
|
|
5
5
|
ancestorScroll?: boolean;
|
|
@@ -75,10 +75,10 @@ declare function getPlacement(referenceOrFn: MaybeFn<MaybeRectElement>, floating
|
|
|
75
75
|
defer?: boolean;
|
|
76
76
|
}): () => void;
|
|
77
77
|
|
|
78
|
-
type
|
|
78
|
+
type GetPlacementStylesOptions = {
|
|
79
79
|
placement?: Placement;
|
|
80
80
|
};
|
|
81
|
-
declare function getPlacementStyles(options:
|
|
81
|
+
declare function getPlacementStyles(options: GetPlacementStylesOptions): {
|
|
82
82
|
arrow: {
|
|
83
83
|
readonly [x: string]: string;
|
|
84
84
|
readonly position: "absolute";
|
|
@@ -103,4 +103,4 @@ declare function getPlacementStyles(options: Options): {
|
|
|
103
103
|
};
|
|
104
104
|
};
|
|
105
105
|
|
|
106
|
-
export { PositioningOptions, getBasePlacement, getPlacement, getPlacementStyles };
|
|
106
|
+
export { AutoUpdateOptions, BasePlacement, GetPlacementStylesOptions, PositioningOptions, getBasePlacement, getPlacement, getPlacementStyles };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Placement, Boundary, ComputePositionReturn, VirtualElement } from '@floating-ui/dom';
|
|
2
|
-
export { Placement } from '@floating-ui/dom';
|
|
2
|
+
export { Boundary, ComputePositionReturn, Placement } from '@floating-ui/dom';
|
|
3
3
|
|
|
4
4
|
type AutoUpdateOptions = {
|
|
5
5
|
ancestorScroll?: boolean;
|
|
@@ -75,10 +75,10 @@ declare function getPlacement(referenceOrFn: MaybeFn<MaybeRectElement>, floating
|
|
|
75
75
|
defer?: boolean;
|
|
76
76
|
}): () => void;
|
|
77
77
|
|
|
78
|
-
type
|
|
78
|
+
type GetPlacementStylesOptions = {
|
|
79
79
|
placement?: Placement;
|
|
80
80
|
};
|
|
81
|
-
declare function getPlacementStyles(options:
|
|
81
|
+
declare function getPlacementStyles(options: GetPlacementStylesOptions): {
|
|
82
82
|
arrow: {
|
|
83
83
|
readonly [x: string]: string;
|
|
84
84
|
readonly position: "absolute";
|
|
@@ -103,4 +103,4 @@ declare function getPlacementStyles(options: Options): {
|
|
|
103
103
|
};
|
|
104
104
|
};
|
|
105
105
|
|
|
106
|
-
export { PositioningOptions, getBasePlacement, getPlacement, getPlacementStyles };
|
|
106
|
+
export { AutoUpdateOptions, BasePlacement, GetPlacementStylesOptions, PositioningOptions, getBasePlacement, getPlacement, getPlacementStyles };
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/get-placement.ts","../src/auto-update.ts","../src/middleware.ts","../src/get-styles.ts"],"sourcesContent":["export { getPlacement, getBasePlacement } from \"./get-placement\"\nexport { getPlacementStyles } from \"./get-styles\"\nexport type { Placement, PositioningOptions } from \"./types\"\n","import type { Middleware, Placement, VirtualElement } from \"@floating-ui/dom\"\nimport { ComputePositionConfig, arrow, computePosition, flip, offset, shift, size } from \"@floating-ui/dom\"\nimport { raf } from \"@zag-js/dom-query\"\nimport { callAll } from \"@zag-js/utils\"\nimport { autoUpdate } from \"./auto-update\"\nimport { shiftArrow, transformOrigin } from \"./middleware\"\nimport type { BasePlacement, PositioningOptions } from \"./types\"\n\nconst defaultOptions: PositioningOptions = {\n strategy: \"absolute\",\n placement: \"bottom\",\n listeners: true,\n gutter: 8,\n flip: true,\n sameWidth: false,\n overflowPadding: 8,\n}\n\ntype MaybeRectElement = HTMLElement | VirtualElement | null\ntype MaybeElement = HTMLElement | null\ntype MaybeFn<T> = T | (() => T)\n\nfunction getPlacementImpl(reference: MaybeRectElement, floating: MaybeElement, opts: PositioningOptions = {}) {\n if (!floating || !reference) return\n\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 const middleware: Middleware[] = []\n\n const boundary = typeof options.boundary === \"function\" ? options.boundary() : options.boundary\n\n if (options.flip) {\n middleware.push(\n flip({\n boundary,\n padding: options.overflowPadding,\n }),\n )\n }\n\n if (options.gutter || options.offset) {\n const arrowOffset = arrowEl ? arrowEl.offsetHeight / 2 : 0\n const data = options.offset ? options.offset : { mainAxis: options.gutter }\n if (data?.mainAxis != null) data.mainAxis += arrowOffset\n middleware.push(offset(data))\n }\n\n middleware.push(\n shift({\n boundary,\n crossAxis: options.overlap,\n padding: options.overflowPadding,\n }),\n )\n\n if (arrowEl) {\n // prettier-ignore\n middleware.push(\n arrow({ element: arrowEl, padding: 8 }),\n shiftArrow({ element: arrowEl }),\n )\n }\n\n middleware.push(transformOrigin)\n\n middleware.push(\n size({\n padding: options.overflowPadding,\n apply({ rects, availableHeight, availableWidth }) {\n const referenceWidth = Math.round(rects.reference.width)\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 if (options.sameWidth) {\n Object.assign(floating.style, {\n width: `${referenceWidth}px`,\n minWidth: \"unset\",\n })\n }\n\n if (options.fitViewport) {\n Object.assign(floating.style, {\n maxWidth: `${availableWidth}px`,\n maxHeight: `${availableHeight}px`,\n })\n }\n },\n }),\n )\n\n /* -----------------------------------------------------------------------------\n * The actual positioning function\n * -----------------------------------------------------------------------------*/\n\n function compute(config: Omit<ComputePositionConfig, \"platform\"> = {}) {\n if (!reference || !floating) return\n const { placement, strategy, onComplete } = options\n\n computePosition(reference, floating, {\n placement,\n middleware,\n strategy,\n ...config,\n }).then((data) => {\n const x = Math.round(data.x)\n const y = Math.round(data.y)\n\n Object.assign(floating.style, {\n position: data.strategy,\n top: \"0px\",\n left: \"0px\",\n transform: `translate3d(${x}px, ${y}px, 0)`,\n })\n\n onComplete?.(data)\n })\n }\n\n compute()\n\n return callAll(\n options.listeners ? autoUpdate(reference, floating, compute, options.listeners) : undefined,\n options.onCleanup,\n )\n}\n\nexport function getBasePlacement(placement: Placement): BasePlacement {\n return placement.split(\"-\")[0] as BasePlacement\n}\n\nexport function getPlacement(\n referenceOrFn: MaybeFn<MaybeRectElement>,\n floatingOrFn: MaybeFn<MaybeElement>,\n opts: PositioningOptions & { defer?: boolean } = {},\n) {\n const { defer, ...restOptions } = 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, restOptions))\n }),\n )\n return () => {\n cleanups.forEach((fn) => fn?.())\n }\n}\n","import type { Placement, ReferenceElement } from \"@floating-ui/dom\"\nimport { getOverflowAncestors } from \"@floating-ui/dom\"\nimport { trackElementRect } from \"@zag-js/element-rect\"\n\nexport type { Placement }\n\nexport type AutoUpdateOptions = {\n ancestorScroll?: boolean\n ancestorResize?: boolean\n referenceResize?: boolean\n}\n\ntype Ancestors = ReturnType<typeof getOverflowAncestors>\n\nconst callAll =\n (...fns: VoidFunction[]) =>\n () =>\n fns.forEach((fn) => fn())\n\nconst isHTMLElement = (el: any): el is HTMLElement => {\n return typeof el === \"object\" && el !== null && el.nodeType === 1\n}\n\nconst addDomEvent = (el: HTMLElement, type: string, fn: VoidFunction, options?: boolean | AddEventListenerOptions) => {\n el.addEventListener(type, fn, options)\n return () => el.removeEventListener(type, fn, options)\n}\n\nfunction resolveOptions(option: boolean | AutoUpdateOptions) {\n const bool = typeof option === \"boolean\"\n return {\n ancestorResize: bool ? option : option.ancestorResize ?? true,\n ancestorScroll: bool ? option : option.ancestorScroll ?? true,\n referenceResize: bool ? option : option.referenceResize ?? true,\n }\n}\n\nexport function autoUpdate(\n reference: ReferenceElement,\n floating: HTMLElement,\n update: () => void,\n options: boolean | AutoUpdateOptions = false,\n) {\n const { ancestorScroll, ancestorResize, referenceResize } = resolveOptions(options)\n\n const useAncestors = ancestorScroll || ancestorResize\n const ancestors: Ancestors = []\n\n if (useAncestors && isHTMLElement(reference)) {\n ancestors.push(...getOverflowAncestors(reference))\n }\n\n function addResizeListeners() {\n let cleanups: VoidFunction[] = [trackElementRect(floating, { scope: \"size\", onChange: update })]\n if (referenceResize && isHTMLElement(reference)) {\n cleanups.push(trackElementRect(reference, { onChange: update }))\n }\n cleanups.push(callAll(...ancestors.map((el: any) => addDomEvent(el, \"resize\", update))))\n return () => cleanups.forEach((fn) => fn())\n }\n\n function addScrollListeners() {\n return callAll(...ancestors.map((el: any) => addDomEvent(el, \"scroll\", update, { passive: true })))\n }\n\n return callAll(addResizeListeners(), addScrollListeners())\n}\n","import type { Coords, Middleware } from \"@floating-ui/dom\"\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 transformOrigin: 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 * Arrow Middleware\n * -----------------------------------------------------------------------------*/\n\ntype ArrowOptions = { element: HTMLElement }\n\ntype BasePlacement = \"top\" | \"bottom\" | \"left\" | \"right\"\n\nexport const shiftArrow = (opts: ArrowOptions): Middleware => ({\n name: \"shiftArrow\",\n fn({ placement, middlewareData }) {\n const { element: arrow } = opts\n\n if (middlewareData.arrow) {\n const { x, y } = middlewareData.arrow\n\n const dir = placement.split(\"-\")[0] as BasePlacement\n\n Object.assign(arrow.style, {\n left: x != null ? `${x}px` : \"\",\n top: y != null ? `${y}px` : \"\",\n [dir]: `calc(100% + ${cssVars.arrowOffset.reference})`,\n })\n }\n\n return {}\n },\n})\n","import type { Placement } from \"@floating-ui/dom\"\nimport { cssVars } from \"./middleware\"\n\ntype Options = {\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(options: Options) {\n const { placement = \"bottom\" } = 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 transform: ARROW_FLOATING_STYLE[placement.split(\"-\")[0]],\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: \"absolute\",\n minWidth: \"max-content\",\n top: \"0px\",\n left: \"0px\",\n } as const,\n }\n}\n"],"mappings":"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","names":["import_dom","arrow","transformOrigin"]}
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/get-placement.ts","../src/auto-update.ts","../src/middleware.ts","../src/get-styles.ts"],"sourcesContent":["export { getBasePlacement, getPlacement } from \"./get-placement\"\nexport { getPlacementStyles, type GetPlacementStylesOptions } from \"./get-styles\"\nexport type {\n AutoUpdateOptions,\n BasePlacement,\n Boundary,\n ComputePositionReturn,\n Placement,\n PositioningOptions,\n} from \"./types\"\n","import type { Middleware, Placement, VirtualElement } from \"@floating-ui/dom\"\nimport { type ComputePositionConfig, arrow, computePosition, flip, offset, shift, size } from \"@floating-ui/dom\"\nimport { raf } from \"@zag-js/dom-query\"\nimport { callAll } from \"@zag-js/utils\"\nimport { autoUpdate } from \"./auto-update\"\nimport { shiftArrow, transformOrigin } from \"./middleware\"\nimport type { BasePlacement, PositioningOptions } from \"./types\"\n\nconst defaultOptions: PositioningOptions = {\n strategy: \"absolute\",\n placement: \"bottom\",\n listeners: true,\n gutter: 8,\n flip: true,\n sameWidth: false,\n overflowPadding: 8,\n}\n\ntype MaybeRectElement = HTMLElement | VirtualElement | null\ntype MaybeElement = HTMLElement | null\ntype MaybeFn<T> = T | (() => T)\n\nfunction getPlacementImpl(reference: MaybeRectElement, floating: MaybeElement, opts: PositioningOptions = {}) {\n if (!floating || !reference) return\n\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 const middleware: Middleware[] = []\n\n const boundary = typeof options.boundary === \"function\" ? options.boundary() : options.boundary\n\n if (options.flip) {\n middleware.push(\n flip({\n boundary,\n padding: options.overflowPadding,\n }),\n )\n }\n\n if (options.gutter || options.offset) {\n const arrowOffset = arrowEl ? arrowEl.offsetHeight / 2 : 0\n const data = options.offset ? options.offset : { mainAxis: options.gutter }\n if (data?.mainAxis != null) data.mainAxis += arrowOffset\n middleware.push(offset(data))\n }\n\n middleware.push(\n shift({\n boundary,\n crossAxis: options.overlap,\n padding: options.overflowPadding,\n }),\n )\n\n if (arrowEl) {\n // prettier-ignore\n middleware.push(\n arrow({ element: arrowEl, padding: 8 }),\n shiftArrow({ element: arrowEl }),\n )\n }\n\n middleware.push(transformOrigin)\n\n middleware.push(\n size({\n padding: options.overflowPadding,\n apply({ rects, availableHeight, availableWidth }) {\n const referenceWidth = Math.round(rects.reference.width)\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 if (options.sameWidth) {\n Object.assign(floating.style, {\n width: `${referenceWidth}px`,\n minWidth: \"unset\",\n })\n }\n\n if (options.fitViewport) {\n Object.assign(floating.style, {\n maxWidth: `${availableWidth}px`,\n maxHeight: `${availableHeight}px`,\n })\n }\n },\n }),\n )\n\n /* -----------------------------------------------------------------------------\n * The actual positioning function\n * -----------------------------------------------------------------------------*/\n\n function compute(config: Omit<ComputePositionConfig, \"platform\"> = {}) {\n if (!reference || !floating) return\n const { placement, strategy, onComplete } = options\n\n computePosition(reference, floating, {\n placement,\n middleware,\n strategy,\n ...config,\n }).then((data) => {\n const x = Math.round(data.x)\n const y = Math.round(data.y)\n\n Object.assign(floating.style, {\n position: data.strategy,\n top: \"0px\",\n left: \"0px\",\n transform: `translate3d(${x}px, ${y}px, 0)`,\n })\n\n onComplete?.(data)\n })\n }\n\n compute()\n\n return callAll(\n options.listeners ? autoUpdate(reference, floating, compute, options.listeners) : undefined,\n options.onCleanup,\n )\n}\n\nexport function getBasePlacement(placement: Placement): BasePlacement {\n return placement.split(\"-\")[0] as BasePlacement\n}\n\nexport function getPlacement(\n referenceOrFn: MaybeFn<MaybeRectElement>,\n floatingOrFn: MaybeFn<MaybeElement>,\n opts: PositioningOptions & { defer?: boolean } = {},\n) {\n const { defer, ...restOptions } = 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, restOptions))\n }),\n )\n return () => {\n cleanups.forEach((fn) => fn?.())\n }\n}\n","import type { Placement, ReferenceElement } from \"@floating-ui/dom\"\nimport { getOverflowAncestors } from \"@floating-ui/dom\"\nimport { trackElementRect } from \"@zag-js/element-rect\"\n\nexport type { Placement }\n\nexport type AutoUpdateOptions = {\n ancestorScroll?: boolean\n ancestorResize?: boolean\n referenceResize?: boolean\n}\n\ntype Ancestors = ReturnType<typeof getOverflowAncestors>\n\nconst callAll =\n (...fns: VoidFunction[]) =>\n () =>\n fns.forEach((fn) => fn())\n\nconst isHTMLElement = (el: any): el is HTMLElement => {\n return typeof el === \"object\" && el !== null && el.nodeType === 1\n}\n\nconst addDomEvent = (el: HTMLElement, type: string, fn: VoidFunction, options?: boolean | AddEventListenerOptions) => {\n el.addEventListener(type, fn, options)\n return () => el.removeEventListener(type, fn, options)\n}\n\nfunction resolveOptions(option: boolean | AutoUpdateOptions) {\n const bool = typeof option === \"boolean\"\n return {\n ancestorResize: bool ? option : option.ancestorResize ?? true,\n ancestorScroll: bool ? option : option.ancestorScroll ?? true,\n referenceResize: bool ? option : option.referenceResize ?? true,\n }\n}\n\nexport function autoUpdate(\n reference: ReferenceElement,\n floating: HTMLElement,\n update: () => void,\n options: boolean | AutoUpdateOptions = false,\n) {\n const { ancestorScroll, ancestorResize, referenceResize } = resolveOptions(options)\n\n const useAncestors = ancestorScroll || ancestorResize\n const ancestors: Ancestors = []\n\n if (useAncestors && isHTMLElement(reference)) {\n ancestors.push(...getOverflowAncestors(reference))\n }\n\n function addResizeListeners() {\n let cleanups: VoidFunction[] = [trackElementRect(floating, { scope: \"size\", onChange: update })]\n if (referenceResize && isHTMLElement(reference)) {\n cleanups.push(trackElementRect(reference, { onChange: update }))\n }\n cleanups.push(callAll(...ancestors.map((el: any) => addDomEvent(el, \"resize\", update))))\n return () => cleanups.forEach((fn) => fn())\n }\n\n function addScrollListeners() {\n return callAll(...ancestors.map((el: any) => addDomEvent(el, \"scroll\", update, { passive: true })))\n }\n\n return callAll(addResizeListeners(), addScrollListeners())\n}\n","import type { Coords, Middleware } from \"@floating-ui/dom\"\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 transformOrigin: 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 * Arrow Middleware\n * -----------------------------------------------------------------------------*/\n\ntype ArrowOptions = { element: HTMLElement }\n\ntype BasePlacement = \"top\" | \"bottom\" | \"left\" | \"right\"\n\nexport const shiftArrow = (opts: ArrowOptions): Middleware => ({\n name: \"shiftArrow\",\n fn({ placement, middlewareData }) {\n const { element: arrow } = opts\n\n if (middlewareData.arrow) {\n const { x, y } = middlewareData.arrow\n\n const dir = placement.split(\"-\")[0] as BasePlacement\n\n Object.assign(arrow.style, {\n left: x != null ? `${x}px` : \"\",\n top: y != null ? `${y}px` : \"\",\n [dir]: `calc(100% + ${cssVars.arrowOffset.reference})`,\n })\n }\n\n return {}\n },\n})\n","import type { Placement } from \"@floating-ui/dom\"\nimport { cssVars } from \"./middleware\"\n\nexport type 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(options: GetPlacementStylesOptions) {\n const { placement = \"bottom\" } = 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 transform: ARROW_FLOATING_STYLE[placement.split(\"-\")[0]],\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: \"absolute\",\n minWidth: \"max-content\",\n top: \"0px\",\n left: \"0px\",\n } as const,\n }\n}\n"],"mappings":"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","names":["import_dom","arrow","transformOrigin"]}
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/get-placement.ts","../src/auto-update.ts","../src/middleware.ts","../src/get-styles.ts"],"sourcesContent":["import type { Middleware, Placement, VirtualElement } from \"@floating-ui/dom\"\nimport { ComputePositionConfig, arrow, computePosition, flip, offset, shift, size } from \"@floating-ui/dom\"\nimport { raf } from \"@zag-js/dom-query\"\nimport { callAll } from \"@zag-js/utils\"\nimport { autoUpdate } from \"./auto-update\"\nimport { shiftArrow, transformOrigin } from \"./middleware\"\nimport type { BasePlacement, PositioningOptions } from \"./types\"\n\nconst defaultOptions: PositioningOptions = {\n strategy: \"absolute\",\n placement: \"bottom\",\n listeners: true,\n gutter: 8,\n flip: true,\n sameWidth: false,\n overflowPadding: 8,\n}\n\ntype MaybeRectElement = HTMLElement | VirtualElement | null\ntype MaybeElement = HTMLElement | null\ntype MaybeFn<T> = T | (() => T)\n\nfunction getPlacementImpl(reference: MaybeRectElement, floating: MaybeElement, opts: PositioningOptions = {}) {\n if (!floating || !reference) return\n\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 const middleware: Middleware[] = []\n\n const boundary = typeof options.boundary === \"function\" ? options.boundary() : options.boundary\n\n if (options.flip) {\n middleware.push(\n flip({\n boundary,\n padding: options.overflowPadding,\n }),\n )\n }\n\n if (options.gutter || options.offset) {\n const arrowOffset = arrowEl ? arrowEl.offsetHeight / 2 : 0\n const data = options.offset ? options.offset : { mainAxis: options.gutter }\n if (data?.mainAxis != null) data.mainAxis += arrowOffset\n middleware.push(offset(data))\n }\n\n middleware.push(\n shift({\n boundary,\n crossAxis: options.overlap,\n padding: options.overflowPadding,\n }),\n )\n\n if (arrowEl) {\n // prettier-ignore\n middleware.push(\n arrow({ element: arrowEl, padding: 8 }),\n shiftArrow({ element: arrowEl }),\n )\n }\n\n middleware.push(transformOrigin)\n\n middleware.push(\n size({\n padding: options.overflowPadding,\n apply({ rects, availableHeight, availableWidth }) {\n const referenceWidth = Math.round(rects.reference.width)\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 if (options.sameWidth) {\n Object.assign(floating.style, {\n width: `${referenceWidth}px`,\n minWidth: \"unset\",\n })\n }\n\n if (options.fitViewport) {\n Object.assign(floating.style, {\n maxWidth: `${availableWidth}px`,\n maxHeight: `${availableHeight}px`,\n })\n }\n },\n }),\n )\n\n /* -----------------------------------------------------------------------------\n * The actual positioning function\n * -----------------------------------------------------------------------------*/\n\n function compute(config: Omit<ComputePositionConfig, \"platform\"> = {}) {\n if (!reference || !floating) return\n const { placement, strategy, onComplete } = options\n\n computePosition(reference, floating, {\n placement,\n middleware,\n strategy,\n ...config,\n }).then((data) => {\n const x = Math.round(data.x)\n const y = Math.round(data.y)\n\n Object.assign(floating.style, {\n position: data.strategy,\n top: \"0px\",\n left: \"0px\",\n transform: `translate3d(${x}px, ${y}px, 0)`,\n })\n\n onComplete?.(data)\n })\n }\n\n compute()\n\n return callAll(\n options.listeners ? autoUpdate(reference, floating, compute, options.listeners) : undefined,\n options.onCleanup,\n )\n}\n\nexport function getBasePlacement(placement: Placement): BasePlacement {\n return placement.split(\"-\")[0] as BasePlacement\n}\n\nexport function getPlacement(\n referenceOrFn: MaybeFn<MaybeRectElement>,\n floatingOrFn: MaybeFn<MaybeElement>,\n opts: PositioningOptions & { defer?: boolean } = {},\n) {\n const { defer, ...restOptions } = 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, restOptions))\n }),\n )\n return () => {\n cleanups.forEach((fn) => fn?.())\n }\n}\n","import type { Placement, ReferenceElement } from \"@floating-ui/dom\"\nimport { getOverflowAncestors } from \"@floating-ui/dom\"\nimport { trackElementRect } from \"@zag-js/element-rect\"\n\nexport type { Placement }\n\nexport type AutoUpdateOptions = {\n ancestorScroll?: boolean\n ancestorResize?: boolean\n referenceResize?: boolean\n}\n\ntype Ancestors = ReturnType<typeof getOverflowAncestors>\n\nconst callAll =\n (...fns: VoidFunction[]) =>\n () =>\n fns.forEach((fn) => fn())\n\nconst isHTMLElement = (el: any): el is HTMLElement => {\n return typeof el === \"object\" && el !== null && el.nodeType === 1\n}\n\nconst addDomEvent = (el: HTMLElement, type: string, fn: VoidFunction, options?: boolean | AddEventListenerOptions) => {\n el.addEventListener(type, fn, options)\n return () => el.removeEventListener(type, fn, options)\n}\n\nfunction resolveOptions(option: boolean | AutoUpdateOptions) {\n const bool = typeof option === \"boolean\"\n return {\n ancestorResize: bool ? option : option.ancestorResize ?? true,\n ancestorScroll: bool ? option : option.ancestorScroll ?? true,\n referenceResize: bool ? option : option.referenceResize ?? true,\n }\n}\n\nexport function autoUpdate(\n reference: ReferenceElement,\n floating: HTMLElement,\n update: () => void,\n options: boolean | AutoUpdateOptions = false,\n) {\n const { ancestorScroll, ancestorResize, referenceResize } = resolveOptions(options)\n\n const useAncestors = ancestorScroll || ancestorResize\n const ancestors: Ancestors = []\n\n if (useAncestors && isHTMLElement(reference)) {\n ancestors.push(...getOverflowAncestors(reference))\n }\n\n function addResizeListeners() {\n let cleanups: VoidFunction[] = [trackElementRect(floating, { scope: \"size\", onChange: update })]\n if (referenceResize && isHTMLElement(reference)) {\n cleanups.push(trackElementRect(reference, { onChange: update }))\n }\n cleanups.push(callAll(...ancestors.map((el: any) => addDomEvent(el, \"resize\", update))))\n return () => cleanups.forEach((fn) => fn())\n }\n\n function addScrollListeners() {\n return callAll(...ancestors.map((el: any) => addDomEvent(el, \"scroll\", update, { passive: true })))\n }\n\n return callAll(addResizeListeners(), addScrollListeners())\n}\n","import type { Coords, Middleware } from \"@floating-ui/dom\"\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 transformOrigin: 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 * Arrow Middleware\n * -----------------------------------------------------------------------------*/\n\ntype ArrowOptions = { element: HTMLElement }\n\ntype BasePlacement = \"top\" | \"bottom\" | \"left\" | \"right\"\n\nexport const shiftArrow = (opts: ArrowOptions): Middleware => ({\n name: \"shiftArrow\",\n fn({ placement, middlewareData }) {\n const { element: arrow } = opts\n\n if (middlewareData.arrow) {\n const { x, y } = middlewareData.arrow\n\n const dir = placement.split(\"-\")[0] as BasePlacement\n\n Object.assign(arrow.style, {\n left: x != null ? `${x}px` : \"\",\n top: y != null ? `${y}px` : \"\",\n [dir]: `calc(100% + ${cssVars.arrowOffset.reference})`,\n })\n }\n\n return {}\n },\n})\n","import type { Placement } from \"@floating-ui/dom\"\nimport { cssVars } from \"./middleware\"\n\ntype Options = {\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(options: Options) {\n const { placement = \"bottom\" } = 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 transform: ARROW_FLOATING_STYLE[placement.split(\"-\")[0]],\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: \"absolute\",\n minWidth: \"max-content\",\n top: \"0px\",\n left: \"0px\",\n } as const,\n }\n}\n"],"mappings":"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","names":["callAll","arrow","transformOrigin","callAll"]}
|
|
1
|
+
{"version":3,"sources":["../src/get-placement.ts","../src/auto-update.ts","../src/middleware.ts","../src/get-styles.ts"],"sourcesContent":["import type { Middleware, Placement, VirtualElement } from \"@floating-ui/dom\"\nimport { type ComputePositionConfig, arrow, computePosition, flip, offset, shift, size } from \"@floating-ui/dom\"\nimport { raf } from \"@zag-js/dom-query\"\nimport { callAll } from \"@zag-js/utils\"\nimport { autoUpdate } from \"./auto-update\"\nimport { shiftArrow, transformOrigin } from \"./middleware\"\nimport type { BasePlacement, PositioningOptions } from \"./types\"\n\nconst defaultOptions: PositioningOptions = {\n strategy: \"absolute\",\n placement: \"bottom\",\n listeners: true,\n gutter: 8,\n flip: true,\n sameWidth: false,\n overflowPadding: 8,\n}\n\ntype MaybeRectElement = HTMLElement | VirtualElement | null\ntype MaybeElement = HTMLElement | null\ntype MaybeFn<T> = T | (() => T)\n\nfunction getPlacementImpl(reference: MaybeRectElement, floating: MaybeElement, opts: PositioningOptions = {}) {\n if (!floating || !reference) return\n\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 const middleware: Middleware[] = []\n\n const boundary = typeof options.boundary === \"function\" ? options.boundary() : options.boundary\n\n if (options.flip) {\n middleware.push(\n flip({\n boundary,\n padding: options.overflowPadding,\n }),\n )\n }\n\n if (options.gutter || options.offset) {\n const arrowOffset = arrowEl ? arrowEl.offsetHeight / 2 : 0\n const data = options.offset ? options.offset : { mainAxis: options.gutter }\n if (data?.mainAxis != null) data.mainAxis += arrowOffset\n middleware.push(offset(data))\n }\n\n middleware.push(\n shift({\n boundary,\n crossAxis: options.overlap,\n padding: options.overflowPadding,\n }),\n )\n\n if (arrowEl) {\n // prettier-ignore\n middleware.push(\n arrow({ element: arrowEl, padding: 8 }),\n shiftArrow({ element: arrowEl }),\n )\n }\n\n middleware.push(transformOrigin)\n\n middleware.push(\n size({\n padding: options.overflowPadding,\n apply({ rects, availableHeight, availableWidth }) {\n const referenceWidth = Math.round(rects.reference.width)\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 if (options.sameWidth) {\n Object.assign(floating.style, {\n width: `${referenceWidth}px`,\n minWidth: \"unset\",\n })\n }\n\n if (options.fitViewport) {\n Object.assign(floating.style, {\n maxWidth: `${availableWidth}px`,\n maxHeight: `${availableHeight}px`,\n })\n }\n },\n }),\n )\n\n /* -----------------------------------------------------------------------------\n * The actual positioning function\n * -----------------------------------------------------------------------------*/\n\n function compute(config: Omit<ComputePositionConfig, \"platform\"> = {}) {\n if (!reference || !floating) return\n const { placement, strategy, onComplete } = options\n\n computePosition(reference, floating, {\n placement,\n middleware,\n strategy,\n ...config,\n }).then((data) => {\n const x = Math.round(data.x)\n const y = Math.round(data.y)\n\n Object.assign(floating.style, {\n position: data.strategy,\n top: \"0px\",\n left: \"0px\",\n transform: `translate3d(${x}px, ${y}px, 0)`,\n })\n\n onComplete?.(data)\n })\n }\n\n compute()\n\n return callAll(\n options.listeners ? autoUpdate(reference, floating, compute, options.listeners) : undefined,\n options.onCleanup,\n )\n}\n\nexport function getBasePlacement(placement: Placement): BasePlacement {\n return placement.split(\"-\")[0] as BasePlacement\n}\n\nexport function getPlacement(\n referenceOrFn: MaybeFn<MaybeRectElement>,\n floatingOrFn: MaybeFn<MaybeElement>,\n opts: PositioningOptions & { defer?: boolean } = {},\n) {\n const { defer, ...restOptions } = 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, restOptions))\n }),\n )\n return () => {\n cleanups.forEach((fn) => fn?.())\n }\n}\n","import type { Placement, ReferenceElement } from \"@floating-ui/dom\"\nimport { getOverflowAncestors } from \"@floating-ui/dom\"\nimport { trackElementRect } from \"@zag-js/element-rect\"\n\nexport type { Placement }\n\nexport type AutoUpdateOptions = {\n ancestorScroll?: boolean\n ancestorResize?: boolean\n referenceResize?: boolean\n}\n\ntype Ancestors = ReturnType<typeof getOverflowAncestors>\n\nconst callAll =\n (...fns: VoidFunction[]) =>\n () =>\n fns.forEach((fn) => fn())\n\nconst isHTMLElement = (el: any): el is HTMLElement => {\n return typeof el === \"object\" && el !== null && el.nodeType === 1\n}\n\nconst addDomEvent = (el: HTMLElement, type: string, fn: VoidFunction, options?: boolean | AddEventListenerOptions) => {\n el.addEventListener(type, fn, options)\n return () => el.removeEventListener(type, fn, options)\n}\n\nfunction resolveOptions(option: boolean | AutoUpdateOptions) {\n const bool = typeof option === \"boolean\"\n return {\n ancestorResize: bool ? option : option.ancestorResize ?? true,\n ancestorScroll: bool ? option : option.ancestorScroll ?? true,\n referenceResize: bool ? option : option.referenceResize ?? true,\n }\n}\n\nexport function autoUpdate(\n reference: ReferenceElement,\n floating: HTMLElement,\n update: () => void,\n options: boolean | AutoUpdateOptions = false,\n) {\n const { ancestorScroll, ancestorResize, referenceResize } = resolveOptions(options)\n\n const useAncestors = ancestorScroll || ancestorResize\n const ancestors: Ancestors = []\n\n if (useAncestors && isHTMLElement(reference)) {\n ancestors.push(...getOverflowAncestors(reference))\n }\n\n function addResizeListeners() {\n let cleanups: VoidFunction[] = [trackElementRect(floating, { scope: \"size\", onChange: update })]\n if (referenceResize && isHTMLElement(reference)) {\n cleanups.push(trackElementRect(reference, { onChange: update }))\n }\n cleanups.push(callAll(...ancestors.map((el: any) => addDomEvent(el, \"resize\", update))))\n return () => cleanups.forEach((fn) => fn())\n }\n\n function addScrollListeners() {\n return callAll(...ancestors.map((el: any) => addDomEvent(el, \"scroll\", update, { passive: true })))\n }\n\n return callAll(addResizeListeners(), addScrollListeners())\n}\n","import type { Coords, Middleware } from \"@floating-ui/dom\"\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 transformOrigin: 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 * Arrow Middleware\n * -----------------------------------------------------------------------------*/\n\ntype ArrowOptions = { element: HTMLElement }\n\ntype BasePlacement = \"top\" | \"bottom\" | \"left\" | \"right\"\n\nexport const shiftArrow = (opts: ArrowOptions): Middleware => ({\n name: \"shiftArrow\",\n fn({ placement, middlewareData }) {\n const { element: arrow } = opts\n\n if (middlewareData.arrow) {\n const { x, y } = middlewareData.arrow\n\n const dir = placement.split(\"-\")[0] as BasePlacement\n\n Object.assign(arrow.style, {\n left: x != null ? `${x}px` : \"\",\n top: y != null ? `${y}px` : \"\",\n [dir]: `calc(100% + ${cssVars.arrowOffset.reference})`,\n })\n }\n\n return {}\n },\n})\n","import type { Placement } from \"@floating-ui/dom\"\nimport { cssVars } from \"./middleware\"\n\nexport type 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(options: GetPlacementStylesOptions) {\n const { placement = \"bottom\" } = 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 transform: ARROW_FLOATING_STYLE[placement.split(\"-\")[0]],\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: \"absolute\",\n minWidth: \"max-content\",\n top: \"0px\",\n left: \"0px\",\n } as const,\n }\n}\n"],"mappings":"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","names":["callAll","arrow","transformOrigin","callAll"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zag-js/popper",
|
|
3
|
-
"version": "0.11.
|
|
3
|
+
"version": "0.11.2",
|
|
4
4
|
"description": "Dynamic positioning logic for ui machines",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"js",
|
|
@@ -24,9 +24,9 @@
|
|
|
24
24
|
},
|
|
25
25
|
"dependencies": {
|
|
26
26
|
"@floating-ui/dom": "1.4.4",
|
|
27
|
-
"@zag-js/dom-query": "0.11.
|
|
28
|
-
"@zag-js/element-rect": "0.11.
|
|
29
|
-
"@zag-js/utils": "0.11.
|
|
27
|
+
"@zag-js/dom-query": "0.11.2",
|
|
28
|
+
"@zag-js/element-rect": "0.11.2",
|
|
29
|
+
"@zag-js/utils": "0.11.2"
|
|
30
30
|
},
|
|
31
31
|
"devDependencies": {
|
|
32
32
|
"clean-package": "2.2.0"
|
package/src/get-placement.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { Middleware, Placement, VirtualElement } from "@floating-ui/dom"
|
|
2
|
-
import { ComputePositionConfig, arrow, computePosition, flip, offset, shift, size } from "@floating-ui/dom"
|
|
2
|
+
import { type ComputePositionConfig, arrow, computePosition, flip, offset, shift, size } from "@floating-ui/dom"
|
|
3
3
|
import { raf } from "@zag-js/dom-query"
|
|
4
4
|
import { callAll } from "@zag-js/utils"
|
|
5
5
|
import { autoUpdate } from "./auto-update"
|
package/src/get-styles.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { Placement } from "@floating-ui/dom"
|
|
2
2
|
import { cssVars } from "./middleware"
|
|
3
3
|
|
|
4
|
-
type
|
|
4
|
+
export type GetPlacementStylesOptions = {
|
|
5
5
|
placement?: Placement
|
|
6
6
|
}
|
|
7
7
|
|
|
@@ -12,7 +12,7 @@ const ARROW_FLOATING_STYLE = {
|
|
|
12
12
|
right: "rotate(315deg)",
|
|
13
13
|
} as const
|
|
14
14
|
|
|
15
|
-
export function getPlacementStyles(options:
|
|
15
|
+
export function getPlacementStyles(options: GetPlacementStylesOptions) {
|
|
16
16
|
const { placement = "bottom" } = options
|
|
17
17
|
|
|
18
18
|
return {
|
package/src/index.ts
CHANGED
|
@@ -1,3 +1,10 @@
|
|
|
1
|
-
export {
|
|
2
|
-
export { getPlacementStyles } from "./get-styles"
|
|
3
|
-
export type {
|
|
1
|
+
export { getBasePlacement, getPlacement } from "./get-placement"
|
|
2
|
+
export { getPlacementStyles, type GetPlacementStylesOptions } from "./get-styles"
|
|
3
|
+
export type {
|
|
4
|
+
AutoUpdateOptions,
|
|
5
|
+
BasePlacement,
|
|
6
|
+
Boundary,
|
|
7
|
+
ComputePositionReturn,
|
|
8
|
+
Placement,
|
|
9
|
+
PositioningOptions,
|
|
10
|
+
} from "./types"
|
package/src/types.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { Boundary, ComputePositionReturn, Placement } from "@floating-ui/dom"
|
|
2
2
|
import type { AutoUpdateOptions } from "./auto-update"
|
|
3
3
|
|
|
4
|
-
export type { Placement }
|
|
4
|
+
export type { Placement, Boundary, ComputePositionReturn, AutoUpdateOptions }
|
|
5
5
|
|
|
6
6
|
export type PositioningOptions = {
|
|
7
7
|
/**
|