diff --git a/packages/machines/menu/src/menu.machine.ts b/packages/machines/menu/src/menu.machine.ts index 35664f2920..b95109238c 100644 --- a/packages/machines/menu/src/menu.machine.ts +++ b/packages/machines/menu/src/menu.machine.ts @@ -22,7 +22,7 @@ export const machine = createMachine( loop: false, suspendPointer: false, contextMenuPoint: null, - placementOptions: { placement: "bottom-start", gutter: 8 }, + positioning: { placement: "bottom-start", gutter: 8 }, }, computed: { @@ -40,8 +40,8 @@ export const machine = createMachine( watch: { isSubmenu(ctx) { if (ctx.isSubmenu) { - ctx.placementOptions.placement = ctx.isRtl ? "left-start" : "right-start" - ctx.placementOptions.gutter = 0 + ctx.positioning.placement = ctx.isRtl ? "left-start" : "right-start" + ctx.positioning.gutter = 0 } }, }, @@ -315,11 +315,11 @@ export const machine = createMachine( activities: { computePlacement(ctx) { if (ctx.disablePlacement) return - ctx.currentPlacement = ctx.placementOptions.placement + ctx.currentPlacement = ctx.positioning.placement const arrow = dom.getArrowEl(ctx) const cleanup = getPlacement(dom.getTriggerEl(ctx), dom.getPositionerEl(ctx), { - ...ctx.placementOptions, - arrow: arrow ? { ...ctx.placementOptions.arrow, element: arrow } : undefined, + ...ctx.positioning, + arrow: arrow ? { ...ctx.positioning.arrow, element: arrow } : undefined, onPlacementComplete(placement) { ctx.currentPlacement = placement }, diff --git a/packages/machines/menu/src/menu.types.ts b/packages/machines/menu/src/menu.types.ts index 4072825c95..cabebd37ef 100644 --- a/packages/machines/menu/src/menu.types.ts +++ b/packages/machines/menu/src/menu.types.ts @@ -1,5 +1,5 @@ import type { Machine, StateMachine as S } from "@ui-machines/core" -import type { PlacementOptions, Placement } from "@ui-machines/popper" +import type { PositioningOptions, Placement } from "@ui-machines/popper" import type { Point } from "@ui-machines/rect-utils" import type { Context } from "@ui-machines/types" @@ -63,7 +63,7 @@ export type MachineContext = Context<{ /** * The options used to dynamically position the menu */ - placementOptions: PlacementOptions + positioning: PositioningOptions /** * Whether to disable dynamic placement */ diff --git a/packages/machines/popover/src/popover.connect.ts b/packages/machines/popover/src/popover.connect.ts index 0acf56b7bd..37c29ac209 100644 --- a/packages/machines/popover/src/popover.connect.ts +++ b/packages/machines/popover/src/popover.connect.ts @@ -13,7 +13,7 @@ export function connect( const pointerdownNode = state.context.pointerdownNode const isOpen = state.matches("open") - const arrow = state.context.placementOptions.arrow + const arrow = state.context.positioning.arrow return { isOpen, diff --git a/packages/machines/popover/src/popover.machine.ts b/packages/machines/popover/src/popover.machine.ts index edc5e28c37..8866adecc4 100644 --- a/packages/machines/popover/src/popover.machine.ts +++ b/packages/machines/popover/src/popover.machine.ts @@ -29,7 +29,7 @@ export const machine = createMachine( closeOnEsc: true, autoFocus: true, modal: false, - placementOptions: { placement: "bottom" }, + positioning: { placement: "bottom" }, currentPlacement: undefined, }, @@ -114,11 +114,11 @@ export const machine = createMachine( { activities: { computePlacement(ctx) { - ctx.currentPlacement = ctx.placementOptions.placement + ctx.currentPlacement = ctx.positioning.placement const anchorEl = ctx.isAnchorRendered ? dom.getAnchorEl(ctx) : dom.getTriggerEl(ctx) const arrow = dom.getArrowEl(ctx) const cleanup = getPlacement(anchorEl, dom.getPositionerEl(ctx), { - ...ctx.placementOptions, + ...ctx.positioning, arrow: arrow ? { element: arrow } : undefined, onPlacementComplete(placement) { ctx.currentPlacement = placement diff --git a/packages/machines/popover/src/popover.types.ts b/packages/machines/popover/src/popover.types.ts index d0f636fc55..46fb905c91 100644 --- a/packages/machines/popover/src/popover.types.ts +++ b/packages/machines/popover/src/popover.types.ts @@ -1,4 +1,4 @@ -import type { PlacementOptions, Placement } from "@ui-machines/popper" +import type { PositioningOptions, Placement } from "@ui-machines/popper" import type { Context, MaybeElement } from "@ui-machines/types" export type MachineContext = Context<{ @@ -62,7 +62,7 @@ export type MachineContext = Context<{ /** * The user provided options used to position the popover content */ - placementOptions: PlacementOptions + positioning: PositioningOptions /** * @internal The computed placement (maybe different from initial placement) */ diff --git a/packages/machines/tooltip/src/tooltip.connect.ts b/packages/machines/tooltip/src/tooltip.connect.ts index 86f2112d78..9e2e0d5585 100644 --- a/packages/machines/tooltip/src/tooltip.connect.ts +++ b/packages/machines/tooltip/src/tooltip.connect.ts @@ -17,7 +17,7 @@ export function connect( const triggerId = dom.getTriggerId(state.context) const contentId = dom.getContentId(state.context) - const arrow = state.context.placementOptions.arrow + const arrow = state.context.positioning.arrow return { isVisible, diff --git a/packages/machines/tooltip/src/tooltip.machine.ts b/packages/machines/tooltip/src/tooltip.machine.ts index 4dbb537e01..359c484119 100644 --- a/packages/machines/tooltip/src/tooltip.machine.ts +++ b/packages/machines/tooltip/src/tooltip.machine.ts @@ -24,7 +24,7 @@ export const machine = createMachine( closeDelay: 500, closeOnPointerDown: true, interactive: true, - placementOptions: { placement: "bottom" }, + positioning: { placement: "bottom" }, currentPlacement: undefined, }, @@ -133,13 +133,13 @@ export const machine = createMachine( { activities: { computePlacement(ctx) { - ctx.currentPlacement = ctx.placementOptions.placement + ctx.currentPlacement = ctx.positioning.placement let cleanup: VoidFunction raf(() => { const arrow = dom.getArrowEl(ctx) cleanup = getPlacement(dom.getTriggerEl(ctx), dom.getPositionerEl(ctx), { - ...ctx.placementOptions, - arrow: arrow ? { ...ctx.placementOptions.arrow, element: arrow } : undefined, + ...ctx.positioning, + arrow: arrow ? { ...ctx.positioning.arrow, element: arrow } : undefined, onPlacementComplete(placement) { ctx.currentPlacement = placement }, diff --git a/packages/machines/tooltip/src/tooltip.types.ts b/packages/machines/tooltip/src/tooltip.types.ts index 6a9188d872..2c800c3a82 100644 --- a/packages/machines/tooltip/src/tooltip.types.ts +++ b/packages/machines/tooltip/src/tooltip.types.ts @@ -1,4 +1,4 @@ -import { Placement, PlacementOptions } from "@ui-machines/popper" +import { Placement, PositioningOptions } from "@ui-machines/popper" export type MachineContext = { /** @@ -50,7 +50,7 @@ export type MachineContext = { /** * The user provided options used to position the popover content */ - placementOptions: PlacementOptions + positioning: PositioningOptions /** * @internal The computed placement of the tooltip. */ diff --git a/packages/utilities/popper/src/index.ts b/packages/utilities/popper/src/index.ts index fba46d1f8e..6f37cc18c1 100644 --- a/packages/utilities/popper/src/index.ts +++ b/packages/utilities/popper/src/index.ts @@ -15,7 +15,7 @@ import { cssVars, positionArrow, transformOrigin } from "./middleware" export type { Placement } -export type PlacementOptions = { +export type PositioningOptions = { arrow?: { padding?: number; element?: HTMLElement; size?: number; shadowColor?: string } strategy?: "absolute" | "fixed" placement?: Placement @@ -29,7 +29,7 @@ export type PlacementOptions = { onCleanup?: VoidFunction } -const defaultOpts: PlacementOptions = { +const defaultOptions: PositioningOptions = { strategy: "absolute", placement: "bottom", eventListeners: true, @@ -39,38 +39,42 @@ const defaultOpts: PlacementOptions = { sameWidth: false, } -export function getPlacement(reference: HTMLElement | null, floating: HTMLElement | null, opts: PlacementOptions = {}) { +export function getPlacement( + reference: HTMLElement | null, + floating: HTMLElement | null, + options: PositioningOptions = {}, +) { if (reference == null || floating == null) { return noop } - opts = Object.assign({}, defaultOpts, opts) + options = Object.assign({}, defaultOptions, options) const win = reference.ownerDocument.defaultView || window const middleware: Middleware[] = [transformOrigin] - if (opts.flip) { - middleware.push(flip({ boundary: opts.boundary, padding: 8 })) + if (options.flip) { + middleware.push(flip({ boundary: options.boundary, padding: 8 })) } - if (opts.gutter || opts.offset) { - const data = opts.gutter ? { mainAxis: opts.gutter } : opts.offset + if (options.gutter || options.offset) { + const data = options.gutter ? { mainAxis: options.gutter } : options.offset middleware.push(offset(data)) } - middleware.push(shift({ boundary: opts.boundary })) + middleware.push(shift({ boundary: options.boundary })) - if (opts.arrow?.element) { + if (options.arrow?.element) { middleware.push( arrow({ - element: opts.arrow.element, - padding: opts.arrow.padding ?? 8, + element: options.arrow.element, + padding: options.arrow.padding ?? 8, }), - positionArrow({ element: opts.arrow?.element }), + positionArrow({ element: options.arrow?.element }), ) } - if (opts.sameWidth) { + if (options.sameWidth) { middleware.push( size({ apply({ reference }) { @@ -86,17 +90,18 @@ export function getPlacement(reference: HTMLElement | null, floating: HTMLElemen function compute() { if (reference == null || floating == null) return computePosition(reference, floating, { - placement: opts.placement, + placement: options.placement, middleware, - strategy: opts.strategy, + strategy: options.strategy, }).then(({ x, y, placement, strategy }) => { Object.assign(floating.style, { left: `${x}px`, top: `${y}px`, position: strategy }) - opts.onPlacementComplete?.(placement) + options.onPlacementComplete?.(placement) }) } function addResizeListeners() { - const enabled = typeof opts.eventListeners === "boolean" ? opts.eventListeners : opts.eventListeners?.resize + const enabled = + typeof options.eventListeners === "boolean" ? options.eventListeners : options.eventListeners?.resize if (!enabled) return const unobserve = observeElementRect(reference!, compute) @@ -109,7 +114,8 @@ export function getPlacement(reference: HTMLElement | null, floating: HTMLElemen } function addScrollListeners() { - const enabled = typeof opts.eventListeners === "boolean" ? opts.eventListeners : opts.eventListeners?.scroll + const enabled = + typeof options.eventListeners === "boolean" ? options.eventListeners : options.eventListeners?.scroll if (!enabled || reference == null) return const fns = getScrollParents(reference).map((el) => { el.addEventListener("scroll", compute) @@ -125,7 +131,7 @@ export function getPlacement(reference: HTMLElement | null, floating: HTMLElemen compute() const cleanups = [addResizeListeners(), addScrollListeners()] return function cleanup() { - opts.onCleanup?.() + options.onCleanup?.() cleanups.forEach((fn) => fn?.()) } } @@ -141,8 +147,8 @@ type ArrowStyleOptions = { measured?: boolean } -export function getArrowStyle(opts: ArrowStyleOptions = {}) { - const { size = 8, background, shadowColor, measured } = opts +export function getArrowStyle(options: ArrowStyleOptions = {}) { + const { size = 8, background, shadowColor, measured } = options return { position: "absolute", [cssVars.arrowSize.variable]: `${size}px`,