@zag-js/slider 0.70.0 → 0.72.0

package/src/slider.dom.ts

@@ -1,47 +0,0 @@
-import { getRelativePoint, type Point } from "@zag-js/dom-event"
-import { createScope, queryAll } from "@zag-js/dom-query"
-import { dispatchInputValueEvent } from "@zag-js/form-utils"
-import { getPercentValue } from "@zag-js/numeric-range"
-import { styleGetterFns } from "./slider.style"
-import type { MachineContext as Ctx } from "./slider.types"
-
-export const dom = createScope({
-  ...styleGetterFns,
-  getRootId: (ctx: Ctx) => ctx.ids?.root ?? `slider:${ctx.id}`,
-  getThumbId: (ctx: Ctx, index: number) => ctx.ids?.thumb?.(index) ?? `slider:${ctx.id}:thumb:${index}`,
-  getHiddenInputId: (ctx: Ctx, index: number) => ctx.ids?.hiddenInput?.(index) ?? `slider:${ctx.id}:input:${index}`,
-  getControlId: (ctx: Ctx) => ctx.ids?.control ?? `slider:${ctx.id}:control`,
-  getTrackId: (ctx: Ctx) => ctx.ids?.track ?? `slider:${ctx.id}:track`,
-  getRangeId: (ctx: Ctx) => ctx.ids?.range ?? `slider:${ctx.id}:range`,
-  getLabelId: (ctx: Ctx) => ctx.ids?.label ?? `slider:${ctx.id}:label`,
-  getValueTextId: (ctx: Ctx) => ctx.ids?.valueText ?? `slider:${ctx.id}:value-text`,
-  getMarkerId: (ctx: Ctx, value: number) => ctx.ids?.marker?.(value) ?? `slider:${ctx.id}:marker:${value}`,
-
-  getRootEl: (ctx: Ctx) => dom.getById(ctx, dom.getRootId(ctx)),
-  getThumbEl: (ctx: Ctx, index: number) => dom.getById(ctx, dom.getThumbId(ctx, index)),
-  getHiddenInputEl: (ctx: Ctx, index: number) => dom.getById<HTMLInputElement>(ctx, dom.getHiddenInputId(ctx, index)),
-  getControlEl: (ctx: Ctx) => dom.getById(ctx, dom.getControlId(ctx)),
-  getElements: (ctx: Ctx) => queryAll(dom.getControlEl(ctx), "[role=slider]"),
-  getFirstEl: (ctx: Ctx) => dom.getElements(ctx)[0],
-  getRangeEl: (ctx: Ctx) => dom.getById(ctx, dom.getRangeId(ctx)),
-
-  getValueFromPoint(ctx: Ctx, point: Point) {
-    const controlEl = dom.getControlEl(ctx)
-    if (!controlEl) return
-    const relativePoint = getRelativePoint(point, controlEl)
-    const percent = relativePoint.getPercentValue({
-      orientation: ctx.orientation,
-      dir: ctx.dir,
-      inverted: { y: true },
-    })
-    return getPercentValue(percent, ctx.min, ctx.max, ctx.step)
-  },
-  dispatchChangeEvent(ctx: Ctx) {
-    const valueArray = Array.from(ctx.value)
-    valueArray.forEach((value, index) => {
-      const inputEl = dom.getHiddenInputEl(ctx, index)
-      if (!inputEl) return
-      dispatchInputValueEvent(inputEl, { value })
-    })
-  },
-})

package/src/slider.machine.ts

@@ -1,290 +0,0 @@
-import { createMachine } from "@zag-js/core"
-import { trackPointerMove } from "@zag-js/dom-event"
-import { raf } from "@zag-js/dom-query"
-import { trackElementsSize, type ElementSize } from "@zag-js/element-size"
-import { trackFormControl } from "@zag-js/form-utils"
-import { getValuePercent } from "@zag-js/numeric-range"
-import { compact, isEqual } from "@zag-js/utils"
-import { dom } from "./slider.dom"
-import type { MachineContext, MachineState, UserDefinedContext } from "./slider.types"
-import {
-  assignArray,
-  constrainValue,
-  decrement,
-  getClosestIndex,
-  getRangeAtIndex,
-  increment,
-  normalizeValues,
-} from "./slider.utils"
-
-const isEqualSize = (a: ElementSize | null, b: ElementSize | null) => {
-  return a?.width === b?.width && a?.height === b?.height
-}
-
-export function machine(userContext: UserDefinedContext) {
-  const ctx = compact(userContext)
-  return createMachine<MachineContext, MachineState>(
-    {
-      id: "slider",
-      initial: "idle",
-
-      context: {
-        thumbSize: null,
-        thumbAlignment: "contain",
-        min: 0,
-        max: 100,
-        step: 1,
-        value: [0],
-        origin: "start",
-        orientation: "horizontal",
-        dir: "ltr",
-        minStepsBetweenThumbs: 0,
-        disabled: false,
-        readOnly: false,
-        ...ctx,
-        focusedIndex: -1,
-        fieldsetDisabled: false,
-      },
-
-      computed: {
-        isHorizontal: (ctx) => ctx.orientation === "horizontal",
-        isVertical: (ctx) => ctx.orientation === "vertical",
-        isRtl: (ctx) => ctx.orientation === "horizontal" && ctx.dir === "rtl",
-        isDisabled: (ctx) => !!ctx.disabled || ctx.fieldsetDisabled,
-        isInteractive: (ctx) => !(ctx.readOnly || ctx.isDisabled),
-        hasMeasuredThumbSize: (ctx) => ctx.thumbSize != null,
-        valuePercent(ctx) {
-          return ctx.value.map((value) => 100 * getValuePercent(value, ctx.min, ctx.max))
-        },
-      },
-
-      watch: {
-        value: ["syncInputElements"],
-      },
-
-      entry: ["coarseValue"],
-
-      activities: ["trackFormControlState", "trackThumbsSize"],
-
-      on: {
-        SET_VALUE: [
-          {
-            guard: "hasIndex",
-            actions: "setValueAtIndex",
-          },
-          { actions: "setValue" },
-        ],
-        INCREMENT: {
-          actions: "incrementThumbAtIndex",
-        },
-        DECREMENT: {
-          actions: "decrementThumbAtIndex",
-        },
-      },
-
-      states: {
-        idle: {
-          on: {
-            POINTER_DOWN: {
-              target: "dragging",
-              actions: ["setClosestThumbIndex", "setPointerValue", "focusActiveThumb"],
-            },
-            FOCUS: {
-              target: "focus",
-              actions: "setFocusedIndex",
-            },
-            THUMB_POINTER_DOWN: {
-              target: "dragging",
-              actions: ["setFocusedIndex", "focusActiveThumb"],
-            },
-          },
-        },
-        focus: {
-          entry: "focusActiveThumb",
-          on: {
-            POINTER_DOWN: {
-              target: "dragging",
-              actions: ["setClosestThumbIndex", "setPointerValue", "focusActiveThumb"],
-            },
-            THUMB_POINTER_DOWN: {
-              target: "dragging",
-              actions: ["setFocusedIndex", "focusActiveThumb"],
-            },
-            ARROW_DEC: {
-              actions: ["decrementThumbAtIndex", "invokeOnChangeEnd"],
-            },
-            ARROW_INC: {
-              actions: ["incrementThumbAtIndex", "invokeOnChangeEnd"],
-            },
-            HOME: {
-              actions: ["setFocusedThumbToMin", "invokeOnChangeEnd"],
-            },
-            END: {
-              actions: ["setFocusedThumbToMax", "invokeOnChangeEnd"],
-            },
-            BLUR: {
-              target: "idle",
-              actions: "clearFocusedIndex",
-            },
-          },
-        },
-        dragging: {
-          entry: "focusActiveThumb",
-          activities: "trackPointerMove",
-          on: {
-            POINTER_UP: {
-              target: "focus",
-              actions: "invokeOnChangeEnd",
-            },
-            POINTER_MOVE: {
-              actions: "setPointerValue",
-            },
-          },
-        },
-      },
-    },
-    {
-      guards: {
-        hasIndex: (_ctx, evt) => evt.index != null,
-      },
-      activities: {
-        trackFormControlState(ctx, _evt, { initialContext }) {
-          return trackFormControl(dom.getRootEl(ctx), {
-            onFieldsetDisabledChange(disabled) {
-              ctx.fieldsetDisabled = disabled
-            },
-            onFormReset() {
-              set.value(ctx, initialContext.value)
-            },
-          })
-        },
-
-        trackPointerMove(ctx, _evt, { send }) {
-          return trackPointerMove(dom.getDoc(ctx), {
-            onPointerMove(info) {
-              send({ type: "POINTER_MOVE", point: info.point })
-            },
-            onPointerUp() {
-              send("POINTER_UP")
-            },
-          })
-        },
-        trackThumbsSize(ctx) {
-          if (ctx.thumbAlignment !== "contain" || ctx.thumbSize) return
-
-          return trackElementsSize({
-            getNodes: () => dom.getElements(ctx),
-            observeMutation: true,
-            callback(size) {
-              if (!size || isEqualSize(ctx.thumbSize, size)) return
-              ctx.thumbSize = size
-            },
-          })
-        },
-      },
-      actions: {
-        syncInputElements(ctx) {
-          ctx.value.forEach((value, index) => {
-            const inputEl = dom.getHiddenInputEl(ctx, index)
-            dom.setValue(inputEl, value)
-          })
-        },
-        invokeOnChangeEnd(ctx) {
-          invoke.valueChangeEnd(ctx)
-        },
-        setClosestThumbIndex(ctx, evt) {
-          const pointValue = dom.getValueFromPoint(ctx, evt.point)
-          if (pointValue == null) return
-
-          const focusedIndex = getClosestIndex(ctx, pointValue)
-          set.focusedIndex(ctx, focusedIndex)
-        },
-        setFocusedIndex(ctx, evt) {
-          set.focusedIndex(ctx, evt.index)
-        },
-        clearFocusedIndex(ctx) {
-          set.focusedIndex(ctx, -1)
-        },
-        setPointerValue(ctx, evt) {
-          const pointerValue = dom.getValueFromPoint(ctx, evt.point)
-          if (pointerValue == null) return
-
-          const value = constrainValue(ctx, pointerValue, ctx.focusedIndex)
-          set.valueAtIndex(ctx, ctx.focusedIndex, value)
-        },
-        focusActiveThumb(ctx) {
-          raf(() => {
-            const thumbEl = dom.getThumbEl(ctx, ctx.focusedIndex)
-            thumbEl?.focus({ preventScroll: true })
-          })
-        },
-        decrementThumbAtIndex(ctx, evt) {
-          const value = decrement(ctx, evt.index, evt.step)
-          set.value(ctx, value)
-        },
-        incrementThumbAtIndex(ctx, evt) {
-          const value = increment(ctx, evt.index, evt.step)
-          set.value(ctx, value)
-        },
-        setFocusedThumbToMin(ctx) {
-          const { min } = getRangeAtIndex(ctx, ctx.focusedIndex)
-          set.valueAtIndex(ctx, ctx.focusedIndex, min)
-        },
-        setFocusedThumbToMax(ctx) {
-          const { max } = getRangeAtIndex(ctx, ctx.focusedIndex)
-          set.valueAtIndex(ctx, ctx.focusedIndex, max)
-        },
-        coarseValue(ctx) {
-          const value = normalizeValues(ctx, ctx.value)
-          set.value(ctx, value)
-        },
-        setValueAtIndex(ctx, evt) {
-          const value = constrainValue(ctx, evt.value, evt.index)
-          set.valueAtIndex(ctx, evt.index, value)
-        },
-        setValue(ctx, evt) {
-          const value = normalizeValues(ctx, evt.value)
-          set.value(ctx, value)
-        },
-      },
-    },
-  )
-}
-
-const invoke = {
-  valueChange(ctx: MachineContext) {
-    ctx.onValueChange?.({
-      value: Array.from(ctx.value),
-    })
-    dom.dispatchChangeEvent(ctx)
-  },
-  valueChangeEnd(ctx: MachineContext) {
-    ctx.onValueChangeEnd?.({
-      value: Array.from(ctx.value),
-    })
-  },
-  focusChange(ctx: MachineContext) {
-    ctx.onFocusChange?.({
-      value: Array.from(ctx.value),
-      focusedIndex: ctx.focusedIndex,
-    })
-  },
-}
-
-const set = {
-  valueAtIndex: (ctx: MachineContext, index: number, value: number) => {
-    if (isEqual(ctx.value[index], value)) return
-    ctx.value[index] = value
-    invoke.valueChange(ctx)
-  },
-  value: (ctx: MachineContext, value: number[]) => {
-    if (isEqual(ctx.value, value)) return
-    assignArray(ctx.value, value)
-    invoke.valueChange(ctx)
-  },
-  focusedIndex: (ctx: MachineContext, index: number) => {
-    if (isEqual(ctx.focusedIndex, index)) return
-    ctx.focusedIndex = index
-    invoke.focusChange(ctx)
-  },
-}

package/src/slider.props.ts

@@ -1,36 +0,0 @@
-import { createProps } from "@zag-js/types"
-import { createSplitProps } from "@zag-js/utils"
-import type { ThumbProps, UserDefinedContext } from "./slider.types"
-
-export const props = createProps<UserDefinedContext>()([
-  "aria-label",
-  "aria-labelledby",
-  "dir",
-  "disabled",
-  "form",
-  "getAriaValueText",
-  "getRootNode",
-  "id",
-  "ids",
-  "invalid",
-  "max",
-  "min",
-  "minStepsBetweenThumbs",
-  "name",
-  "onFocusChange",
-  "onValueChange",
-  "onValueChangeEnd",
-  "orientation",
-  "origin",
-  "readOnly",
-  "step",
-  "thumbAlignment",
-  "thumbAlignment",
-  "thumbSize",
-  "value",
-])
-
-export const splitProps = createSplitProps<Partial<UserDefinedContext>>(props)
-
-export const thumbProps = createProps<ThumbProps>()(["index", "name"])
-export const splitThumbProps = createSplitProps<ThumbProps>(thumbProps)

package/src/slider.style.ts

@@ -1,174 +0,0 @@
-import { getValuePercent, getValueTransformer } from "@zag-js/numeric-range"
-import type { Style } from "@zag-js/types"
-import type { MachineContext as Ctx, SharedContext } from "./slider.types"
-
-/* -----------------------------------------------------------------------------
- * Range style calculations
- * -----------------------------------------------------------------------------*/
-
-function getBounds<T>(value: T[]): [T, T] {
-  const firstValue = value[0]
-  const lastThumb = value[value.length - 1]
-  return [firstValue, lastThumb]
-}
-
-export function getRangeOffsets(ctx: Ctx) {
-  const [firstPercent, lastPercent] = getBounds(ctx.valuePercent)
-
-  if (ctx.valuePercent.length === 1) {
-    if (ctx.origin === "center") {
-      const isNegative = ctx.valuePercent[0] < 50
-      const start = isNegative ? `${ctx.valuePercent[0]}%` : "50%"
-      const end = isNegative ? "50%" : `${100 - ctx.valuePercent[0]}%`
-
-      return { start, end }
-    }
-
-    return { start: "0%", end: `${100 - lastPercent}%` }
-  }
-
-  return { start: `${firstPercent}%`, end: `${100 - lastPercent}%` }
-}
-
-function getRangeStyle(ctx: Pick<SharedContext, "isVertical" | "isRtl">): Style {
-  if (ctx.isVertical) {
-    return {
-      position: "absolute",
-      bottom: "var(--slider-range-start)",
-      top: "var(--slider-range-end)",
-    }
-  }
-
-  return {
-    position: "absolute",
-    [ctx.isRtl ? "right" : "left"]: "var(--slider-range-start)",
-    [ctx.isRtl ? "left" : "right"]: "var(--slider-range-end)",
-  }
-}
-
-/* -----------------------------------------------------------------------------
- * Thumb style calculations
- * -----------------------------------------------------------------------------*/
-
-function getVerticalThumbOffset(ctx: SharedContext) {
-  const { height = 0 } = ctx.thumbSize ?? {}
-  const getValue = getValueTransformer([ctx.min, ctx.max], [-height / 2, height / 2])
-  return parseFloat(getValue(ctx.value).toFixed(2))
-}
-
-function getHorizontalThumbOffset(ctx: SharedContext) {
-  const { width = 0 } = ctx.thumbSize ?? {}
-
-  if (ctx.isRtl) {
-    const getValue = getValueTransformer([ctx.max, ctx.min], [-width / 2, width / 2])
-    return -1 * parseFloat(getValue(ctx.value).toFixed(2))
-  }
-
-  const getValue = getValueTransformer([ctx.min, ctx.max], [-width / 2, width / 2])
-  return parseFloat(getValue(ctx.value).toFixed(2))
-}
-
-function getOffset(ctx: SharedContext, percent: number) {
-  if (ctx.thumbAlignment === "center") return `${percent}%`
-  const offset = ctx.isVertical ? getVerticalThumbOffset(ctx) : getHorizontalThumbOffset(ctx)
-  return `calc(${percent}% - ${offset}px)`
-}
-
-function getThumbOffset(ctx: SharedContext) {
-  let percent = getValuePercent(ctx.value, ctx.min, ctx.max) * 100
-  return getOffset(ctx, percent)
-}
-
-function getVisibility(ctx: Ctx) {
-  let visibility: "visible" | "hidden" = "visible"
-  if (ctx.thumbAlignment === "contain" && !ctx.hasMeasuredThumbSize) {
-    visibility = "hidden"
-  }
-  return visibility
-}
-
-function getThumbStyle(ctx: Ctx, index: number): Style {
-  const placementProp = ctx.isVertical ? "bottom" : "insetInlineStart"
-  return {
-    visibility: getVisibility(ctx),
-    position: "absolute",
-    transform: "var(--slider-thumb-transform)",
-    [placementProp]: `var(--slider-thumb-offset-${index})`,
-  }
-}
-
-/* -----------------------------------------------------------------------------
- * Control style calculations
- * -----------------------------------------------------------------------------*/
-
-function getControlStyle(): Style {
-  return {
-    touchAction: "none",
-    userSelect: "none",
-    WebkitUserSelect: "none",
-    position: "relative",
-  }
-}
-
-/* -----------------------------------------------------------------------------
- * Root style calculations
- * -----------------------------------------------------------------------------*/
-
-function getRootStyle(ctx: Ctx): Style {
-  const range = getRangeOffsets(ctx)
-
-  const offsetStyles = ctx.value.reduce<Style>((styles, value, index) => {
-    const offset = getThumbOffset({ ...ctx, value })
-    return { ...styles, [`--slider-thumb-offset-${index}`]: offset }
-  }, {})
-
-  return {
-    ...offsetStyles,
-    "--slider-thumb-transform": ctx.isVertical ? "translateY(50%)" : ctx.isRtl ? "translateX(50%)" : "translateX(-50%)",
-    "--slider-range-start": range.start,
-    "--slider-range-end": range.end,
-  }
-}
-
-/* -----------------------------------------------------------------------------
- * Marker style calculations
- * -----------------------------------------------------------------------------*/
-
-function getMarkerStyle(
-  ctx: Pick<SharedContext, "isHorizontal" | "isRtl" | "thumbAlignment" | "hasMeasuredThumbSize">,
-  value: number,
-): Style {
-  return {
-    // @ts-expect-error
-    visibility: getVisibility(ctx),
-    position: "absolute",
-    pointerEvents: "none",
-    // @ts-expect-error
-    [ctx.isHorizontal ? "insetInlineStart" : "bottom"]: getThumbOffset({ ...ctx, value }),
-    translate: "var(--tx) var(--ty)",
-    "--tx": ctx.isHorizontal ? (ctx.isRtl ? "50%" : "-50%") : "0%",
-    "--ty": !ctx.isHorizontal ? "50%" : "0%",
-  }
-}
-
-/* -----------------------------------------------------------------------------
- * Label style calculations
- * -----------------------------------------------------------------------------*/
-
-function getMarkerGroupStyle(): Style {
-  return {
-    userSelect: "none",
-    WebkitUserSelect: "none",
-    pointerEvents: "none",
-    position: "relative",
-  }
-}
-
-export const styleGetterFns = {
-  getRootStyle,
-  getControlStyle,
-  getThumbStyle,
-  getRangeStyle,
-  getMarkerStyle,
-  getMarkerGroupStyle,
-}