@zag-js/popper 0.12.0 → 0.14.0

package/dist/index.d.mts

@@ -78,7 +78,7 @@ declare function getPlacement(referenceOrFn: MaybeFn<MaybeRectElement>, floating
 type GetPlacementStylesOptions = {
     placement?: Placement;
 };
-declare function getPlacementStyles(options: GetPlacementStylesOptions): {
+declare function getPlacementStyles(options?: PositioningOptions): {
     arrow: {
         readonly [x: string]: string;
         readonly position: "absolute";
@@ -96,10 +96,14 @@ declare function getPlacementStyles(options: GetPlacementStylesOptions): {
         readonly zIndex: "inherit";
     };
     floating: {
-        readonly position: "absolute";
-        readonly minWidth: "max-content";
+        readonly position: "absolute" | "fixed";
+        readonly minWidth: "max-content" | undefined;
+        readonly width: "var(--reference-width)" | undefined;
+        readonly maxWidth: "var(--available-width)" | undefined;
+        readonly maxHeight: "var(--available-height)" | undefined;
         readonly top: "0px";
         readonly left: "0px";
+        readonly transform: "translate3d(var(--x), var(--y), 0)";
     };
 };
 

package/dist/index.d.ts

@@ -78,7 +78,7 @@ declare function getPlacement(referenceOrFn: MaybeFn<MaybeRectElement>, floating
 type GetPlacementStylesOptions = {
     placement?: Placement;
 };
-declare function getPlacementStyles(options: GetPlacementStylesOptions): {
+declare function getPlacementStyles(options?: PositioningOptions): {
     arrow: {
         readonly [x: string]: string;
         readonly position: "absolute";
@@ -96,10 +96,14 @@ declare function getPlacementStyles(options: GetPlacementStylesOptions): {
         readonly zIndex: "inherit";
     };
     floating: {
-        readonly position: "absolute";
-        readonly minWidth: "max-content";
+        readonly position: "absolute" | "fixed";
+        readonly minWidth: "max-content" | undefined;
+        readonly width: "var(--reference-width)" | undefined;
+        readonly maxWidth: "var(--available-width)" | undefined;
+        readonly maxHeight: "var(--available-height)" | undefined;
         readonly top: "0px";
         readonly left: "0px";
+        readonly transform: "translate3d(var(--x), var(--y), 0)";
     };
 };
 

package/dist/index.js

@@ -177,18 +177,6 @@ function getPlacementImpl(reference, floating, opts = {}) {
         floating.style.setProperty("--reference-width", `${referenceWidth}px`);
         floating.style.setProperty("--available-width", `${availableWidth}px`);
         floating.style.setProperty("--available-height", `${availableHeight}px`);
-        if (options.sameWidth) {
-          Object.assign(floating.style, {
-            width: `${referenceWidth}px`,
-            minWidth: "unset"
-          });
-        }
-        if (options.fitViewport) {
-          Object.assign(floating.style, {
-            maxWidth: `${availableWidth}px`,
-            maxHeight: `${availableHeight}px`
-          });
-        }
       }
     })
   );
@@ -203,13 +191,9 @@ function getPlacementImpl(reference, floating, opts = {}) {
       ...config
     }).then((data) => {
       const x = Math.round(data.x);
+      floating.style.setProperty("--x", `${x}px`);
       const y = Math.round(data.y);
-      Object.assign(floating.style, {
-        position: data.strategy,
-        top: "0px",
-        left: "0px",
-        transform: `translate3d(${x}px, ${y}px, 0)`
-      });
+      floating.style.setProperty("--y", `${y}px`);
       onComplete?.(data);
     });
   }
@@ -245,8 +229,8 @@ var ARROW_FLOATING_STYLE = {
   top: "rotate(225deg)",
   right: "rotate(315deg)"
 };
-function getPlacementStyles(options) {
-  const { placement = "bottom" } = options;
+function getPlacementStyles(options = {}) {
+  const { placement = "bottom", sameWidth, fitViewport, strategy = "absolute" } = options;
   return {
     arrow: {
       position: "absolute",
@@ -266,10 +250,14 @@ function getPlacementStyles(options) {
       zIndex: "inherit"
     },
     floating: {
-      position: "absolute",
-      minWidth: "max-content",
+      position: strategy,
+      minWidth: sameWidth ? void 0 : "max-content",
+      width: sameWidth ? "var(--reference-width)" : void 0,
+      maxWidth: fitViewport ? "var(--available-width)" : void 0,
+      maxHeight: fitViewport ? "var(--available-height)" : void 0,
       top: "0px",
-      left: "0px"
+      left: "0px",
+      transform: `translate3d(var(--x), var(--y), 0)`
     }
   };
 }

package/dist/index.js.map

@@ -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 { 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":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACCA,IAAAA,cAA8F;AAC9F,uBAAoB;AACpB,mBAAwB;;;ACFxB,iBAAqC;AACrC,0BAAiC;AAYjC,IAAM,UACJ,IAAI,QACJ,MACE,IAAI,QAAQ,CAAC,OAAO,GAAG,CAAC;AAE5B,IAAM,gBAAgB,CAAC,OAA+B;AACpD,SAAO,OAAO,OAAO,YAAY,OAAO,QAAQ,GAAG,aAAa;AAClE;AAEA,IAAM,cAAc,CAAC,IAAiB,MAAc,IAAkB,YAAgD;AACpH,KAAG,iBAAiB,MAAM,IAAI,OAAO;AACrC,SAAO,MAAM,GAAG,oBAAoB,MAAM,IAAI,OAAO;AACvD;AAEA,SAAS,eAAe,QAAqC;AAC3D,QAAM,OAAO,OAAO,WAAW;AAC/B,SAAO;AAAA,IACL,gBAAgB,OAAO,SAAS,OAAO,kBAAkB;AAAA,IACzD,gBAAgB,OAAO,SAAS,OAAO,kBAAkB;AAAA,IACzD,iBAAiB,OAAO,SAAS,OAAO,mBAAmB;AAAA,EAC7D;AACF;AAEO,SAAS,WACd,WACA,UACA,QACA,UAAuC,OACvC;AACA,QAAM,EAAE,gBAAgB,gBAAgB,gBAAgB,IAAI,eAAe,OAAO;AAElF,QAAM,eAAe,kBAAkB;AACvC,QAAM,YAAuB,CAAC;AAE9B,MAAI,gBAAgB,cAAc,SAAS,GAAG;AAC5C,cAAU,KAAK,OAAG,iCAAqB,SAAS,CAAC;AAAA,EACnD;AAEA,WAAS,qBAAqB;AAC5B,QAAI,WAA2B,KAAC,sCAAiB,UAAU,EAAE,OAAO,QAAQ,UAAU,OAAO,CAAC,CAAC;AAC/F,QAAI,mBAAmB,cAAc,SAAS,GAAG;AAC/C,eAAS,SAAK,sCAAiB,WAAW,EAAE,UAAU,OAAO,CAAC,CAAC;AAAA,IACjE;AACA,aAAS,KAAK,QAAQ,GAAG,UAAU,IAAI,CAAC,OAAY,YAAY,IAAI,UAAU,MAAM,CAAC,CAAC,CAAC;AACvF,WAAO,MAAM,SAAS,QAAQ,CAAC,OAAO,GAAG,CAAC;AAAA,EAC5C;AAEA,WAAS,qBAAqB;AAC5B,WAAO,QAAQ,GAAG,UAAU,IAAI,CAAC,OAAY,YAAY,IAAI,UAAU,QAAQ,EAAE,SAAS,KAAK,CAAC,CAAC,CAAC;AAAA,EACpG;AAEA,SAAO,QAAQ,mBAAmB,GAAG,mBAAmB,CAAC;AAC3D;;;AC5DA,IAAM,QAAQ,CAAC,WAAmB,EAAE,UAAU,OAAO,WAAW,OAAO,SAAS;AAEzE,IAAM,UAAU;AAAA,EACrB,WAAW,MAAM,cAAc;AAAA,EAC/B,eAAe,MAAM,mBAAmB;AAAA,EACxC,SAAS,MAAM,oBAAoB;AAAA,EACnC,iBAAiB,MAAM,oBAAoB;AAAA,EAC3C,aAAa,MAAM,gBAAgB;AACrC;AAMA,IAAM,qBAAqB,CAACC,YAA6B;AAAA,EACvD,KAAK;AAAA,EACL,aAAaA,SAAQ,GAAGA,OAAM,eAAe;AAAA,EAC7C,WAAWA,SAAQ,GAAGA,OAAM,eAAe;AAAA,EAC3C,QAAQ;AAAA,EACR,gBAAgBA,SAAQ,GAAGA,OAAM,YAAY;AAAA,EAC7C,cAAcA,SAAQ,GAAGA,OAAM,YAAY;AAAA,EAC3C,MAAM;AAAA,EACN,cAAcA,SAAQ,SAASA,OAAM,QAAQ;AAAA,EAC7C,YAAYA,SAAQ,SAASA,OAAM,QAAQ;AAAA,EAC3C,OAAO;AAAA,EACP,eAAeA,SAAQ,QAAQA,OAAM,QAAQ;AAAA,EAC7C,aAAaA,SAAQ,QAAQA,OAAM,QAAQ;AAC7C;AAEO,IAAM,kBAA8B;AAAA,EACzC,MAAM;AAAA,EACN,GAAG,EAAE,WAAW,UAAU,eAAe,GAAG;AAC1C,UAAM,EAAE,OAAAA,OAAM,IAAI;AAClB,UAAMC,mBAAkB,mBAAmBD,MAAK,EAAE,SAAS;AAE3D,UAAM,EAAE,SAAS,IAAI;AACrB,aAAS,MAAM,YAAY,QAAQ,gBAAgB,UAAUC,gBAAe;AAE5E,WAAO;AAAA,MACL,MAAM,EAAE,iBAAAA,iBAAgB;AAAA,IAC1B;AAAA,EACF;AACF;AAUO,IAAM,aAAa,CAAC,UAAoC;AAAA,EAC7D,MAAM;AAAA,EACN,GAAG,EAAE,WAAW,eAAe,GAAG;AAChC,UAAM,EAAE,SAASD,OAAM,IAAI;AAE3B,QAAI,eAAe,OAAO;AACxB,YAAM,EAAE,GAAG,EAAE,IAAI,eAAe;AAEhC,YAAM,MAAM,UAAU,MAAM,GAAG,EAAE,CAAC;AAElC,aAAO,OAAOA,OAAM,OAAO;AAAA,QACzB,MAAM,KAAK,OAAO,GAAG,QAAQ;AAAA,QAC7B,KAAK,KAAK,OAAO,GAAG,QAAQ;AAAA,QAC5B,CAAC,GAAG,GAAG,eAAe,QAAQ,YAAY;AAAA,MAC5C,CAAC;AAAA,IACH;AAEA,WAAO,CAAC;AAAA,EACV;AACF;;;AFrEA,IAAM,iBAAqC;AAAA,EACzC,UAAU;AAAA,EACV,WAAW;AAAA,EACX,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,WAAW;AAAA,EACX,iBAAiB;AACnB;AAMA,SAAS,iBAAiB,WAA6B,UAAwB,OAA2B,CAAC,GAAG;AAC5G,MAAI,CAAC,YAAY,CAAC;AAAW;AAE7B,QAAM,UAAU,OAAO,OAAO,CAAC,GAAG,gBAAgB,IAAI;AAMtD,QAAM,UAAU,SAAS,cAA2B,mBAAmB;AACvE,QAAM,aAA2B,CAAC;AAElC,QAAM,WAAW,OAAO,QAAQ,aAAa,aAAa,QAAQ,SAAS,IAAI,QAAQ;AAEvF,MAAI,QAAQ,MAAM;AAChB,eAAW;AAAA,UACT,kBAAK;AAAA,QACH;AAAA,QACA,SAAS,QAAQ;AAAA,MACnB,CAAC;AAAA,IACH;AAAA,EACF;AAEA,MAAI,QAAQ,UAAU,QAAQ,QAAQ;AACpC,UAAM,cAAc,UAAU,QAAQ,eAAe,IAAI;AACzD,UAAM,OAAO,QAAQ,SAAS,QAAQ,SAAS,EAAE,UAAU,QAAQ,OAAO;AAC1E,QAAI,MAAM,YAAY;AAAM,WAAK,YAAY;AAC7C,eAAW,SAAK,oBAAO,IAAI,CAAC;AAAA,EAC9B;AAEA,aAAW;AAAA,QACT,mBAAM;AAAA,MACJ;AAAA,MACA,WAAW,QAAQ;AAAA,MACnB,SAAS,QAAQ;AAAA,IACnB,CAAC;AAAA,EACH;AAEA,MAAI,SAAS;AAEX,eAAW;AAAA,UACT,mBAAM,EAAE,SAAS,SAAS,SAAS,EAAE,CAAC;AAAA,MACtC,WAAW,EAAE,SAAS,QAAQ,CAAC;AAAA,IACjC;AAAA,EACF;AAEA,aAAW,KAAK,eAAe;AAE/B,aAAW;AAAA,QACT,kBAAK;AAAA,MACH,SAAS,QAAQ;AAAA,MACjB,MAAM,EAAE,OAAO,iBAAiB,eAAe,GAAG;AAChD,cAAM,iBAAiB,KAAK,MAAM,MAAM,UAAU,KAAK;AAEvD,iBAAS,MAAM,YAAY,qBAAqB,GAAG,kBAAkB;AACrE,iBAAS,MAAM,YAAY,qBAAqB,GAAG,kBAAkB;AACrE,iBAAS,MAAM,YAAY,sBAAsB,GAAG,mBAAmB;AAEvE,YAAI,QAAQ,WAAW;AACrB,iBAAO,OAAO,SAAS,OAAO;AAAA,YAC5B,OAAO,GAAG;AAAA,YACV,UAAU;AAAA,UACZ,CAAC;AAAA,QACH;AAEA,YAAI,QAAQ,aAAa;AACvB,iBAAO,OAAO,SAAS,OAAO;AAAA,YAC5B,UAAU,GAAG;AAAA,YACb,WAAW,GAAG;AAAA,UAChB,CAAC;AAAA,QACH;AAAA,MACF;AAAA,IACF,CAAC;AAAA,EACH;AAMA,WAAS,QAAQ,SAAkD,CAAC,GAAG;AACrE,QAAI,CAAC,aAAa,CAAC;AAAU;AAC7B,UAAM,EAAE,WAAW,UAAU,WAAW,IAAI;AAE5C,qCAAgB,WAAW,UAAU;AAAA,MACnC;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,CAAC,EAAE,KAAK,CAAC,SAAS;AAChB,YAAM,IAAI,KAAK,MAAM,KAAK,CAAC;AAC3B,YAAM,IAAI,KAAK,MAAM,KAAK,CAAC;AAE3B,aAAO,OAAO,SAAS,OAAO;AAAA,QAC5B,UAAU,KAAK;AAAA,QACf,KAAK;AAAA,QACL,MAAM;AAAA,QACN,WAAW,eAAe,QAAQ;AAAA,MACpC,CAAC;AAED,mBAAa,IAAI;AAAA,IACnB,CAAC;AAAA,EACH;AAEA,UAAQ;AAER,aAAO;AAAA,IACL,QAAQ,YAAY,WAAW,WAAW,UAAU,SAAS,QAAQ,SAAS,IAAI;AAAA,IAClF,QAAQ;AAAA,EACV;AACF;AAEO,SAAS,iBAAiB,WAAqC;AACpE,SAAO,UAAU,MAAM,GAAG,EAAE,CAAC;AAC/B;AAEO,SAAS,aACd,eACA,cACA,OAAiD,CAAC,GAClD;AACA,QAAM,EAAE,OAAO,GAAG,YAAY,IAAI;AAClC,QAAM,OAAO,QAAQ,uBAAM,CAAC,MAAW,EAAE;AACzC,QAAM,WAAyC,CAAC;AAChD,WAAS;AAAA,IACP,KAAK,MAAM;AACT,YAAM,YAAY,OAAO,kBAAkB,aAAa,cAAc,IAAI;AAC1E,YAAM,WAAW,OAAO,iBAAiB,aAAa,aAAa,IAAI;AACvE,eAAS,KAAK,iBAAiB,WAAW,UAAU,WAAW,CAAC;AAAA,IAClE,CAAC;AAAA,EACH;AACA,SAAO,MAAM;AACX,aAAS,QAAQ,CAAC,OAAO,KAAK,CAAC;AAAA,EACjC;AACF;;;AGpJA,IAAM,uBAAuB;AAAA,EAC3B,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,KAAK;AAAA,EACL,OAAO;AACT;AAEO,SAAS,mBAAmB,SAAoC;AACrE,QAAM,EAAE,YAAY,SAAS,IAAI;AAEjC,SAAO;AAAA,IACL,OAAO;AAAA,MACL,UAAU;AAAA,MACV,OAAO,QAAQ,UAAU;AAAA,MACzB,QAAQ,QAAQ,UAAU;AAAA,MAC1B,CAAC,QAAQ,cAAc,QAAQ,GAAG,QAAQ,QAAQ,UAAU;AAAA,MAC5D,CAAC,QAAQ,YAAY,QAAQ,GAAG,QAAQ,QAAQ,cAAc;AAAA,IAChE;AAAA,IAEA,UAAU;AAAA,MACR,WAAW,qBAAqB,UAAU,MAAM,GAAG,EAAE,CAAC,CAAC;AAAA,MACvD,YAAY,QAAQ,QAAQ;AAAA,MAC5B,KAAK;AAAA,MACL,MAAM;AAAA,MACN,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,QAAQ;AAAA,IACV;AAAA,IAEA,UAAU;AAAA,MACR,UAAU;AAAA,MACV,UAAU;AAAA,MACV,KAAK;AAAA,MACL,MAAM;AAAA,IACR;AAAA,EACF;AACF;","names":["import_dom","arrow","transformOrigin"]}
+{"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        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\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      floating.style.setProperty(\"--x\", `${x}px`)\n\n      const y = Math.round(data.y)\n      floating.style.setProperty(\"--y\", `${y}px`)\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\"\nimport type { PositioningOptions } from \"./types\"\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: PositioningOptions = {}) {\n  const { placement = \"bottom\", 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      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: strategy,\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      transform: `translate3d(var(--x), var(--y), 0)`,\n    } as const,\n  }\n}\n"],"mappings":"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","names":["import_dom","arrow","transformOrigin"]}

package/dist/index.mjs

@@ -149,18 +149,6 @@ function getPlacementImpl(reference, floating, opts = {}) {
         floating.style.setProperty("--reference-width", `${referenceWidth}px`);
         floating.style.setProperty("--available-width", `${availableWidth}px`);
         floating.style.setProperty("--available-height", `${availableHeight}px`);
-        if (options.sameWidth) {
-          Object.assign(floating.style, {
-            width: `${referenceWidth}px`,
-            minWidth: "unset"
-          });
-        }
-        if (options.fitViewport) {
-          Object.assign(floating.style, {
-            maxWidth: `${availableWidth}px`,
-            maxHeight: `${availableHeight}px`
-          });
-        }
       }
     })
   );
@@ -175,13 +163,9 @@ function getPlacementImpl(reference, floating, opts = {}) {
       ...config
     }).then((data) => {
       const x = Math.round(data.x);
+      floating.style.setProperty("--x", `${x}px`);
       const y = Math.round(data.y);
-      Object.assign(floating.style, {
-        position: data.strategy,
-        top: "0px",
-        left: "0px",
-        transform: `translate3d(${x}px, ${y}px, 0)`
-      });
+      floating.style.setProperty("--y", `${y}px`);
       onComplete?.(data);
     });
   }
@@ -217,8 +201,8 @@ var ARROW_FLOATING_STYLE = {
   top: "rotate(225deg)",
   right: "rotate(315deg)"
 };
-function getPlacementStyles(options) {
-  const { placement = "bottom" } = options;
+function getPlacementStyles(options = {}) {
+  const { placement = "bottom", sameWidth, fitViewport, strategy = "absolute" } = options;
   return {
     arrow: {
       position: "absolute",
@@ -238,10 +222,14 @@ function getPlacementStyles(options) {
       zIndex: "inherit"
     },
     floating: {
-      position: "absolute",
-      minWidth: "max-content",
+      position: strategy,
+      minWidth: sameWidth ? void 0 : "max-content",
+      width: sameWidth ? "var(--reference-width)" : void 0,
+      maxWidth: fitViewport ? "var(--available-width)" : void 0,
+      maxHeight: fitViewport ? "var(--available-height)" : void 0,
       top: "0px",
-      left: "0px"
+      left: "0px",
+      transform: `translate3d(var(--x), var(--y), 0)`
     }
   };
 }

package/dist/index.mjs.map

@@ -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 { 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"]}
+{"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        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\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      floating.style.setProperty(\"--x\", `${x}px`)\n\n      const y = Math.round(data.y)\n      floating.style.setProperty(\"--y\", `${y}px`)\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\"\nimport type { PositioningOptions } from \"./types\"\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: PositioningOptions = {}) {\n  const { placement = \"bottom\", 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      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: strategy,\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      transform: `translate3d(var(--x), var(--y), 0)`,\n    } as const,\n  }\n}\n"],"mappings":"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","names":["callAll","arrow","transformOrigin","callAll"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/popper",
-  "version": "0.12.0",
+  "version": "0.14.0",
   "description": "Dynamic positioning logic for ui machines",
   "keywords": [
     "js",
@@ -23,10 +23,10 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@floating-ui/dom": "1.4.4",
-    "@zag-js/dom-query": "0.12.0",
-    "@zag-js/element-rect": "0.12.0",
-    "@zag-js/utils": "0.12.0"
+    "@floating-ui/dom": "1.5.1",
+    "@zag-js/dom-query": "0.14.0",
+    "@zag-js/element-rect": "0.14.0",
+    "@zag-js/utils": "0.14.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"

package/src/get-placement.ts

@@ -73,24 +73,9 @@ function getPlacementImpl(reference: MaybeRectElement, floating: MaybeElement, o
       padding: options.overflowPadding,
       apply({ rects, availableHeight, availableWidth }) {
         const referenceWidth = Math.round(rects.reference.width)
-
         floating.style.setProperty("--reference-width", `${referenceWidth}px`)
         floating.style.setProperty("--available-width", `${availableWidth}px`)
         floating.style.setProperty("--available-height", `${availableHeight}px`)
-
-        if (options.sameWidth) {
-          Object.assign(floating.style, {
-            width: `${referenceWidth}px`,
-            minWidth: "unset",
-          })
-        }
-
-        if (options.fitViewport) {
-          Object.assign(floating.style, {
-            maxWidth: `${availableWidth}px`,
-            maxHeight: `${availableHeight}px`,
-          })
-        }
       },
     }),
   )
@@ -110,14 +95,10 @@ function getPlacementImpl(reference: MaybeRectElement, floating: MaybeElement, o
       ...config,
     }).then((data) => {
       const x = Math.round(data.x)
-      const y = Math.round(data.y)
+      floating.style.setProperty("--x", `${x}px`)
 
-      Object.assign(floating.style, {
-        position: data.strategy,
-        top: "0px",
-        left: "0px",
-        transform: `translate3d(${x}px, ${y}px, 0)`,
-      })
+      const y = Math.round(data.y)
+      floating.style.setProperty("--y", `${y}px`)
 
       onComplete?.(data)
     })

package/src/get-styles.ts

@@ -1,5 +1,6 @@
 import type { Placement } from "@floating-ui/dom"
 import { cssVars } from "./middleware"
+import type { PositioningOptions } from "./types"
 
 export type GetPlacementStylesOptions = {
   placement?: Placement
@@ -12,8 +13,8 @@ const ARROW_FLOATING_STYLE = {
   right: "rotate(315deg)",
 } as const
 
-export function getPlacementStyles(options: GetPlacementStylesOptions) {
-  const { placement = "bottom" } = options
+export function getPlacementStyles(options: PositioningOptions = {}) {
+  const { placement = "bottom", sameWidth, fitViewport, strategy = "absolute" } = options
 
   return {
     arrow: {
@@ -36,10 +37,14 @@ export function getPlacementStyles(options: GetPlacementStylesOptions) {
     } as const,
 
     floating: {
-      position: "absolute",
-      minWidth: "max-content",
+      position: strategy,
+      minWidth: sameWidth ? undefined : "max-content",
+      width: sameWidth ? "var(--reference-width)" : undefined,
+      maxWidth: fitViewport ? "var(--available-width)" : undefined,
+      maxHeight: fitViewport ? "var(--available-height)" : undefined,
       top: "0px",
       left: "0px",
+      transform: `translate3d(var(--x), var(--y), 0)`,
     } as const,
   }
 }