@zag-js/splitter 0.69.0 → 0.71.0

package/src/splitter.connect.ts

@@ -1,179 +0,0 @@
-import { getEventKey, getEventStep, type EventKeyMap } from "@zag-js/dom-event"
-import { dataAttr } from "@zag-js/dom-query"
-import type { NormalizeProps, PropTypes } from "@zag-js/types"
-import { parts } from "./splitter.anatomy"
-import { dom } from "./splitter.dom"
-import type { MachineApi, ResizeTriggerProps, ResizeTriggerState, Send, State } from "./splitter.types"
-import { getHandleBounds } from "./splitter.utils"
-
-export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {
-  const horizontal = state.context.isHorizontal
-  const focused = state.hasTag("focus")
-  const dragging = state.matches("dragging")
-  const panels = state.context.panels
-
-  function getResizeTriggerState(props: ResizeTriggerProps): ResizeTriggerState {
-    const { id, disabled } = props
-    const ids = id.split(":")
-    const panelIds = ids.map((id) => dom.getPanelId(state.context, id))
-    const panels = getHandleBounds(state.context, id)
-
-    return {
-      disabled: !!disabled,
-      focused: state.context.activeResizeId === id && focused,
-      panelIds,
-      min: panels?.min,
-      max: panels?.max,
-      value: 0,
-    }
-  }
-
-  return {
-    focused: focused,
-    dragging: dragging,
-    getResizeTriggerState,
-    bounds: getHandleBounds(state.context),
-    setToMinSize(id) {
-      const panel = panels.find((panel) => panel.id === id)
-      send({ type: "SET_PANEL_SIZE", id, size: panel?.minSize, src: "setToMinSize" })
-    },
-    setToMaxSize(id) {
-      const panel = panels.find((panel) => panel.id === id)
-      send({ type: "SET_PANEL_SIZE", id, size: panel?.maxSize, src: "setToMaxSize" })
-    },
-    setSize(id, size) {
-      send({ type: "SET_PANEL_SIZE", id, size })
-    },
-
-    getRootProps() {
-      return normalize.element({
-        ...parts.root.attrs,
-        "data-orientation": state.context.orientation,
-        id: dom.getRootId(state.context),
-        dir: state.context.dir,
-        style: {
-          display: "flex",
-          flexDirection: horizontal ? "row" : "column",
-          height: "100%",
-          width: "100%",
-          overflow: "hidden",
-        },
-      })
-    },
-
-    getPanelProps(props) {
-      const { id } = props
-      return normalize.element({
-        ...parts.panel.attrs,
-        "data-orientation": state.context.orientation,
-        dir: state.context.dir,
-        id: dom.getPanelId(state.context, id),
-        "data-ownedby": dom.getRootId(state.context),
-        style: dom.getPanelStyle(state.context, id),
-      })
-    },
-
-    getResizeTriggerProps(props) {
-      const { id, disabled, step = 1 } = props
-      const triggerState = getResizeTriggerState(props)
-
-      return normalize.element({
-        ...parts.resizeTrigger.attrs,
-        dir: state.context.dir,
-        id: dom.getResizeTriggerId(state.context, id),
-        role: "separator",
-        "data-ownedby": dom.getRootId(state.context),
-        tabIndex: disabled ? undefined : 0,
-        "aria-valuenow": triggerState.value,
-        "aria-valuemin": triggerState.min,
-        "aria-valuemax": triggerState.max,
-        "data-orientation": state.context.orientation,
-        "aria-orientation": state.context.orientation,
-        "aria-controls": triggerState.panelIds.join(" "),
-        "data-focus": dataAttr(triggerState.focused),
-        "data-disabled": dataAttr(disabled),
-        style: {
-          touchAction: "none",
-          userSelect: "none",
-          WebkitUserSelect: "none",
-          flex: "0 0 auto",
-          pointerEvents: dragging && !triggerState.focused ? "none" : undefined,
-          cursor: horizontal ? "col-resize" : "row-resize",
-          [horizontal ? "minHeight" : "minWidth"]: "0",
-        },
-        onPointerDown(event) {
-          if (disabled) {
-            event.preventDefault()
-            return
-          }
-          send({ type: "POINTER_DOWN", id })
-          event.currentTarget.setPointerCapture(event.pointerId)
-          event.preventDefault()
-          event.stopPropagation()
-        },
-        onPointerUp(event) {
-          if (disabled) return
-          if (event.currentTarget.hasPointerCapture(event.pointerId)) {
-            event.currentTarget.releasePointerCapture(event.pointerId)
-          }
-        },
-        onPointerOver() {
-          if (disabled) return
-          send({ type: "POINTER_OVER", id })
-        },
-        onPointerLeave() {
-          if (disabled) return
-          send({ type: "POINTER_LEAVE", id })
-        },
-        onBlur() {
-          send("BLUR")
-        },
-        onFocus() {
-          send({ type: "FOCUS", id })
-        },
-        onDoubleClick() {
-          if (disabled) return
-          send({ type: "DOUBLE_CLICK", id })
-        },
-        onKeyDown(event) {
-          if (event.defaultPrevented) return
-          if (disabled) return
-
-          const moveStep = getEventStep(event) * step
-
-          const keyMap: EventKeyMap = {
-            Enter() {
-              send("ENTER")
-            },
-            ArrowUp() {
-              send({ type: "ARROW_UP", step: moveStep })
-            },
-            ArrowDown() {
-              send({ type: "ARROW_DOWN", step: moveStep })
-            },
-            ArrowLeft() {
-              send({ type: "ARROW_LEFT", step: moveStep })
-            },
-            ArrowRight() {
-              send({ type: "ARROW_RIGHT", step: moveStep })
-            },
-            Home() {
-              send("HOME")
-            },
-            End() {
-              send("END")
-            },
-          }
-
-          const key = getEventKey(event, state.context)
-          const exec = keyMap[key]
-
-          if (exec) {
-            exec(event)
-            event.preventDefault()
-          }
-        },
-      })
-    },
-  }
-}

package/src/splitter.dom.ts

@@ -1,61 +0,0 @@
-import { createScope, queryAll } from "@zag-js/dom-query"
-import type { JSX, Style } from "@zag-js/types"
-import type { MachineContext as Ctx, PanelId } from "./splitter.types"
-
-export const dom = createScope({
-  getRootId: (ctx: Ctx) => ctx.ids?.root ?? `splitter:${ctx.id}`,
-  getResizeTriggerId: (ctx: Ctx, id: string) => ctx.ids?.resizeTrigger?.(id) ?? `splitter:${ctx.id}:splitter:${id}`,
-  getLabelId: (ctx: Ctx) => ctx.ids?.label ?? `splitter:${ctx.id}:label`,
-  getPanelId: (ctx: Ctx, id: string | number) => ctx.ids?.panel?.(id) ?? `splitter:${ctx.id}:panel:${id}`,
-  getGlobalCursorId: (ctx: Ctx) => `splitter:${ctx.id}:global-cursor`,
-
-  getRootEl: (ctx: Ctx) => dom.getById(ctx, dom.getRootId(ctx)),
-  getResizeTriggerEl: (ctx: Ctx, id: string) => dom.getById(ctx, dom.getResizeTriggerId(ctx, id)),
-  getPanelEl: (ctx: Ctx, id: string | number) => dom.getById(ctx, dom.getPanelId(ctx, id)),
-
-  getCursor(ctx: Ctx) {
-    const x = ctx.isHorizontal
-    let cursor: Style["cursor"] = x ? "col-resize" : "row-resize"
-    if (ctx.activeResizeState.isAtMin) cursor = x ? "e-resize" : "s-resize"
-    if (ctx.activeResizeState.isAtMax) cursor = x ? "w-resize" : "n-resize"
-    return cursor
-  },
-
-  getPanelStyle(ctx: Ctx, id: PanelId): JSX.CSSProperties {
-    const flexGrow = ctx.panels.find((panel) => panel.id === id)?.size ?? "0"
-    return {
-      flexBasis: 0,
-      flexGrow,
-      flexShrink: 1,
-      overflow: "hidden",
-    }
-  },
-
-  getActiveHandleEl(ctx: Ctx) {
-    const activeId = ctx.activeResizeId
-    if (activeId == null) return
-    return dom.getById(ctx, dom.getResizeTriggerId(ctx, activeId))
-  },
-
-  getResizeTriggerEls(ctx: Ctx) {
-    const ownerId = CSS.escape(dom.getRootId(ctx))
-    return queryAll(dom.getRootEl(ctx), `[role=separator][data-ownedby='${ownerId}']`)
-  },
-
-  setupGlobalCursor(ctx: Ctx) {
-    const styleEl = dom.getById(ctx, dom.getGlobalCursorId(ctx))
-    const textContent = `* { cursor: ${dom.getCursor(ctx)} !important; }`
-    if (styleEl) {
-      styleEl.textContent = textContent
-    } else {
-      const style = dom.getDoc(ctx).createElement("style")
-      style.id = dom.getGlobalCursorId(ctx)
-      style.textContent = textContent
-      dom.getDoc(ctx).head.appendChild(style)
-    }
-  },
-
-  removeGlobalCursor(ctx: Ctx) {
-    dom.getById(ctx, dom.getGlobalCursorId(ctx))?.remove()
-  },
-})

package/src/splitter.machine.ts

@@ -1,285 +0,0 @@
-import { createMachine } from "@zag-js/core"
-import { getRelativePoint, trackPointerMove } from "@zag-js/dom-event"
-import { raf } from "@zag-js/dom-query"
-import { compact } from "@zag-js/utils"
-import { dom } from "./splitter.dom"
-import type { MachineContext, MachineState, UserDefinedContext } from "./splitter.types"
-import { clamp, getHandleBounds, getHandlePanels, getNormalizedPanels, getPanelBounds } from "./splitter.utils"
-
-export function machine(userContext: UserDefinedContext) {
-  const ctx = compact(userContext)
-  return createMachine<MachineContext, MachineState>(
-    {
-      id: "splitter",
-      initial: "idle",
-      context: {
-        orientation: "horizontal",
-        activeResizeId: null,
-        previousPanels: [],
-        size: [],
-        initialSize: [],
-        activeResizeState: {
-          isAtMin: false,
-          isAtMax: false,
-        },
-        ...ctx,
-      },
-
-      created: ["setPreviousPanels", "setInitialSize"],
-
-      watch: {
-        size: ["setActiveResizeState"],
-      },
-
-      computed: {
-        isHorizontal: (ctx) => ctx.orientation === "horizontal",
-        panels: (ctx) => getNormalizedPanels(ctx),
-      },
-
-      on: {
-        SET_PANEL_SIZE: {
-          actions: "setPanelSize",
-        },
-      },
-      states: {
-        idle: {
-          entry: ["clearActiveHandleId"],
-          on: {
-            POINTER_OVER: {
-              target: "hover:temp",
-              actions: ["setActiveHandleId"],
-            },
-            FOCUS: {
-              target: "focused",
-              actions: ["setActiveHandleId"],
-            },
-            DOUBLE_CLICK: {
-              actions: ["resetStartPanel", "setPreviousPanels"],
-            },
-          },
-        },
-
-        "hover:temp": {
-          after: {
-            HOVER_DELAY: "hover",
-          },
-          on: {
-            POINTER_DOWN: {
-              target: "dragging",
-              actions: ["setActiveHandleId"],
-            },
-            POINTER_LEAVE: "idle",
-          },
-        },
-
-        hover: {
-          tags: ["focus"],
-          on: {
-            POINTER_DOWN: "dragging",
-            POINTER_LEAVE: "idle",
-          },
-        },
-
-        focused: {
-          tags: ["focus"],
-          on: {
-            BLUR: "idle",
-            POINTER_DOWN: {
-              target: "dragging",
-              actions: ["setActiveHandleId"],
-            },
-            ARROW_LEFT: {
-              guard: "isHorizontal",
-              actions: ["shrinkStartPanel", "setPreviousPanels"],
-            },
-            ARROW_RIGHT: {
-              guard: "isHorizontal",
-              actions: ["expandStartPanel", "setPreviousPanels"],
-            },
-            ARROW_UP: {
-              guard: "isVertical",
-              actions: ["shrinkStartPanel", "setPreviousPanels"],
-            },
-            ARROW_DOWN: {
-              guard: "isVertical",
-              actions: ["expandStartPanel", "setPreviousPanels"],
-            },
-            ENTER: [
-              {
-                guard: "isStartPanelAtMax",
-                actions: ["setStartPanelToMin", "setPreviousPanels"],
-              },
-              { actions: ["setStartPanelToMax", "setPreviousPanels"] },
-            ],
-            HOME: {
-              actions: ["setStartPanelToMin", "setPreviousPanels"],
-            },
-            END: {
-              actions: ["setStartPanelToMax", "setPreviousPanels"],
-            },
-          },
-        },
-
-        dragging: {
-          tags: ["focus"],
-          entry: "focusResizeHandle",
-          activities: ["trackPointerMove"],
-          on: {
-            POINTER_MOVE: {
-              actions: ["setPointerValue", "setGlobalCursor", "invokeOnResize"],
-            },
-            POINTER_UP: {
-              target: "focused",
-              actions: ["setPreviousPanels", "clearGlobalCursor", "blurResizeHandle", "invokeOnResizeEnd"],
-            },
-          },
-        },
-      },
-    },
-    {
-      activities: {
-        trackPointerMove: (ctx, _evt, { send }) => {
-          const doc = dom.getDoc(ctx)
-          return trackPointerMove(doc, {
-            onPointerMove(info) {
-              send({ type: "POINTER_MOVE", point: info.point })
-            },
-            onPointerUp() {
-              send("POINTER_UP")
-            },
-          })
-        },
-      },
-      guards: {
-        isStartPanelAtMin: (ctx) => ctx.activeResizeState.isAtMin,
-        isStartPanelAtMax: (ctx) => ctx.activeResizeState.isAtMax,
-        isHorizontal: (ctx) => ctx.isHorizontal,
-        isVertical: (ctx) => !ctx.isHorizontal,
-      },
-      delays: {
-        HOVER_DELAY: 250,
-      },
-      actions: {
-        setGlobalCursor(ctx) {
-          dom.setupGlobalCursor(ctx)
-        },
-        clearGlobalCursor(ctx) {
-          dom.removeGlobalCursor(ctx)
-        },
-        invokeOnResize(ctx) {
-          ctx.onSizeChange?.({ size: Array.from(ctx.size), activeHandleId: ctx.activeResizeId })
-        },
-        invokeOnResizeEnd(ctx) {
-          ctx.onSizeChangeEnd?.({ size: Array.from(ctx.size), activeHandleId: ctx.activeResizeId })
-        },
-        setActiveHandleId(ctx, evt) {
-          ctx.activeResizeId = evt.id
-        },
-        clearActiveHandleId(ctx) {
-          ctx.activeResizeId = null
-        },
-        setInitialSize(ctx) {
-          ctx.initialSize = ctx.panels.slice().map((panel) => ({
-            id: panel.id,
-            size: panel.size,
-          }))
-        },
-        setPanelSize(ctx, evt) {
-          const { id, size } = evt
-          ctx.size = ctx.size.map((panel) => {
-            const panelSize = clamp(size, panel.minSize ?? 0, panel.maxSize ?? 100)
-            return panel.id === id ? { ...panel, size: panelSize } : panel
-          })
-        },
-        setStartPanelToMin(ctx) {
-          const bounds = getPanelBounds(ctx)
-          if (!bounds) return
-          const { before, after } = bounds
-          ctx.size[before.index].size = before.min
-          ctx.size[after.index].size = after.min
-        },
-        setStartPanelToMax(ctx) {
-          const bounds = getPanelBounds(ctx)
-          if (!bounds) return
-          const { before, after } = bounds
-          ctx.size[before.index].size = before.max
-          ctx.size[after.index].size = after.max
-        },
-        expandStartPanel(ctx, evt) {
-          const bounds = getPanelBounds(ctx)
-          if (!bounds) return
-          const { before, after } = bounds
-          ctx.size[before.index].size = before.up(evt.step)
-          ctx.size[after.index].size = after.down(evt.step)
-        },
-        shrinkStartPanel(ctx, evt) {
-          const bounds = getPanelBounds(ctx)
-          if (!bounds) return
-          const { before, after } = bounds
-          ctx.size[before.index].size = before.down(evt.step)
-          ctx.size[after.index].size = after.up(evt.step)
-        },
-        resetStartPanel(ctx, evt) {
-          const bounds = getPanelBounds(ctx, evt.id)
-          if (!bounds) return
-          const { before, after } = bounds
-          ctx.size[before.index].size = ctx.initialSize[before.index].size
-          ctx.size[after.index].size = ctx.initialSize[after.index].size
-        },
-        focusResizeHandle(ctx) {
-          raf(() => {
-            dom.getActiveHandleEl(ctx)?.focus({ preventScroll: true })
-          })
-        },
-        blurResizeHandle(ctx) {
-          raf(() => {
-            dom.getActiveHandleEl(ctx)?.blur()
-          })
-        },
-        setPreviousPanels(ctx) {
-          ctx.previousPanels = ctx.panels.slice()
-        },
-        setActiveResizeState(ctx) {
-          const panels = getPanelBounds(ctx)
-          if (!panels) return
-          const { before } = panels
-          ctx.activeResizeState = {
-            isAtMin: before.isAtMin,
-            isAtMax: before.isAtMax,
-          }
-        },
-        setPointerValue(ctx, evt) {
-          const panels = getHandlePanels(ctx)
-          const bounds = getHandleBounds(ctx)
-
-          if (!panels || !bounds) return
-
-          const rootEl = dom.getRootEl(ctx)
-          if (!rootEl) return
-
-          const relativePoint = getRelativePoint(evt.point, rootEl)
-          const percentValue = relativePoint.getPercentValue({
-            dir: ctx.dir,
-            orientation: ctx.orientation,
-          })
-
-          let pointValue = percentValue * 100
-
-          // update active resize state here because we use `previousPanels` in the calculations
-          ctx.activeResizeState = {
-            isAtMin: pointValue < bounds.min,
-            isAtMax: pointValue > bounds.max,
-          }
-
-          pointValue = clamp(pointValue, bounds.min, bounds.max)
-
-          const { before, after } = panels
-
-          const offset = pointValue - before.end
-          ctx.size[before.index].size = before.size + offset
-          ctx.size[after.index].size = after.size - offset
-        },
-      },
-    },
-  )
-}

package/src/splitter.props.ts

@@ -1,22 +0,0 @@
-import { createProps } from "@zag-js/types"
-import { createSplitProps } from "@zag-js/utils"
-import type { PanelProps, ResizeTriggerProps, UserDefinedContext } from "./splitter.types"
-
-export const props = createProps<UserDefinedContext>()([
-  "dir",
-  "getRootNode",
-  "id",
-  "ids",
-  "onSizeChange",
-  "onSizeChangeEnd",
-  "orientation",
-  "size",
-])
-
-export const splitProps = createSplitProps<Partial<UserDefinedContext>>(props)
-
-export const panelProps = createProps<PanelProps>()(["id", "snapSize"])
-export const splitPanelProps = createSplitProps<PanelProps>(panelProps)
-
-export const resizeTriggerProps = createProps<ResizeTriggerProps>()(["disabled", "id", "step"])
-export const splitResizeTriggerProps = createSplitProps<ResizeTriggerProps>(resizeTriggerProps)

package/src/splitter.types.ts

@@ -1,156 +0,0 @@
-import type { Machine, StateMachine as S } from "@zag-js/core"
-import type { CommonProperties, DirectionProperty, PropTypes, RequiredBy } from "@zag-js/types"
-
-/* -----------------------------------------------------------------------------
- * Callback details
- * -----------------------------------------------------------------------------*/
-
-export type PanelId = string | number
-
-export interface PanelSizeData {
-  id: PanelId
-  size?: number
-  minSize?: number
-  maxSize?: number
-}
-
-export interface SizeChangeDetails {
-  size: PanelSizeData[]
-  activeHandleId: string | null
-}
-
-/* -----------------------------------------------------------------------------
- * Machine context
- * -----------------------------------------------------------------------------*/
-
-type ElementIds = Partial<{
-  root: string
-  resizeTrigger(id: string): string
-  label(id: string): string
-  panel(id: string | number): string
-}>
-
-interface PublicContext extends DirectionProperty, CommonProperties {
-  /**
-   * The orientation of the splitter. Can be `horizontal` or `vertical`
-   */
-  orientation: "horizontal" | "vertical"
-  /**
-   * The size data of the panels
-   */
-  size: PanelSizeData[]
-  /**
-   * Function called when the splitter is resized.
-   */
-  onSizeChange?: (details: SizeChangeDetails) => void
-  /**
-   * Function called when the splitter resize ends.
-   */
-  onSizeChangeEnd?: (details: SizeChangeDetails) => void
-  /**
-   * The ids of the elements in the splitter. Useful for composition.
-   */
-  ids?: ElementIds
-}
-
-export type UserDefinedContext = RequiredBy<PublicContext, "id">
-
-export type NormalizedPanelData = Array<
-  Required<PanelSizeData> & {
-    remainingSize: number
-    minSize: number
-    maxSize: number
-    start: number
-    end: number
-  }
->
-
-type ComputedContext = Readonly<{
-  isHorizontal: boolean
-  panels: NormalizedPanelData
-  activeResizeBounds?: { min: number; max: number }
-  activeResizePanels?: { before: PanelSizeData; after: PanelSizeData }
-}>
-
-interface PrivateContext {
-  activeResizeId: string | null
-  previousPanels: NormalizedPanelData
-  activeResizeState: { isAtMin: boolean; isAtMax: boolean }
-  initialSize: Array<Required<Pick<PanelSizeData, "id" | "size">>>
-}
-
-export interface MachineContext extends PublicContext, ComputedContext, PrivateContext {}
-
-export interface MachineState {
-  value: "idle" | "hover:temp" | "hover" | "dragging" | "focused"
-  tags: "focus"
-}
-
-export type State = S.State<MachineContext, MachineState>
-
-export type Send = S.Send<S.AnyEventObject>
-
-export type Service = Machine<MachineContext, MachineState, S.AnyEventObject>
-
-/* -----------------------------------------------------------------------------
- * Component API
- * -----------------------------------------------------------------------------*/
-
-export interface PanelProps {
-  id: PanelId
-  snapSize?: number
-}
-
-export interface ResizeTriggerProps {
-  id: `${PanelId}:${PanelId}`
-  step?: number
-  disabled?: boolean
-}
-
-export interface ResizeTriggerState {
-  disabled: boolean
-  focused: boolean
-  panelIds: string[]
-  min: number | undefined
-  max: number | undefined
-  value: number
-}
-
-export interface PanelBounds {
-  min: number
-  max: number
-}
-
-export interface MachineApi<T extends PropTypes = PropTypes> {
-  /**
-   * Whether the splitter is focused.
-   */
-  focused: boolean
-  /**
-   * Whether the splitter is being dragged.
-   */
-  dragging: boolean
-  /**
-   *  The bounds of the currently dragged splitter handle.
-   */
-  bounds: PanelBounds | undefined
-  /**
-   * Function to set a panel to its minimum size.
-   */
-  setToMinSize(id: PanelId): void
-  /**
-   * Function to set a panel to its maximum size.
-   */
-  setToMaxSize(id: PanelId): void
-  /**
-   * Function to set the size of a panel.
-   */
-  setSize(id: PanelId, size: number): void
-  /**
-   * Returns the state details for a resize trigger.
-   */
-  getResizeTriggerState(props: ResizeTriggerProps): ResizeTriggerState
-  getRootProps(): T["element"]
-  getPanelProps(props: PanelProps): T["element"]
-  getResizeTriggerProps(props: ResizeTriggerProps): T["element"]
-}