@zag-js/tabs 0.70.0 → 0.72.0

package/src/tabs.connect.ts

@@ -1,201 +0,0 @@
-import { getEventKey, type EventKeyMap } from "@zag-js/dom-event"
-import { dataAttr, isComposingEvent, isSafari, isSelfTarget } from "@zag-js/dom-query"
-import type { NormalizeProps, PropTypes } from "@zag-js/types"
-import { parts } from "./tabs.anatomy"
-import { dom } from "./tabs.dom"
-import type { MachineApi, Send, State, TriggerProps, TriggerState } from "./tabs.types"
-
-export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {
-  const translations = state.context.translations
-  const focused = state.matches("focused")
-
-  const isVertical = state.context.orientation === "vertical"
-  const isHorizontal = state.context.orientation === "horizontal"
-  const composite = state.context.composite
-  const indicator = state.context.indicatorState
-
-  function getTriggerState(props: TriggerProps): TriggerState {
-    return {
-      selected: state.context.value === props.value,
-      focused: state.context.focusedValue === props.value,
-      disabled: !!props.disabled,
-    }
-  }
-
-  return {
-    value: state.context.value,
-    focusedValue: state.context.focusedValue,
-    setValue(value) {
-      send({ type: "SET_VALUE", value })
-    },
-    clearValue() {
-      send({ type: "CLEAR_VALUE" })
-    },
-    setIndicatorRect(value) {
-      const id = dom.getTriggerId(state.context, value)
-      send({ type: "SET_INDICATOR_RECT", id })
-    },
-    syncTabIndex() {
-      send("SYNC_TAB_INDEX")
-    },
-    selectNext(fromValue) {
-      send({ type: "TAB_FOCUS", value: fromValue, src: "selectNext" })
-      send({ type: "ARROW_NEXT", src: "selectNext" })
-    },
-    selectPrev(fromValue) {
-      send({ type: "TAB_FOCUS", value: fromValue, src: "selectPrev" })
-      send({ type: "ARROW_PREV", src: "selectPrev" })
-    },
-    focus() {
-      dom.getSelectedTriggerEl(state.context)?.focus()
-    },
-
-    getRootProps() {
-      return normalize.element({
-        ...parts.root.attrs,
-        id: dom.getRootId(state.context),
-        "data-orientation": state.context.orientation,
-        "data-focus": dataAttr(focused),
-        dir: state.context.dir,
-      })
-    },
-
-    getListProps() {
-      return normalize.element({
-        ...parts.list.attrs,
-        id: dom.getListId(state.context),
-        role: "tablist",
-        dir: state.context.dir,
-        "data-focus": dataAttr(focused),
-        "aria-orientation": state.context.orientation,
-        "data-orientation": state.context.orientation,
-        "aria-label": translations?.listLabel,
-        onKeyDown(event) {
-          if (event.defaultPrevented) return
-
-          if (!isSelfTarget(event)) return
-          if (isComposingEvent(event)) return
-
-          const keyMap: EventKeyMap = {
-            ArrowDown() {
-              if (isHorizontal) return
-              send({ type: "ARROW_NEXT", key: "ArrowDown" })
-            },
-            ArrowUp() {
-              if (isHorizontal) return
-              send({ type: "ARROW_PREV", key: "ArrowUp" })
-            },
-            ArrowLeft() {
-              if (isVertical) return
-              send({ type: "ARROW_PREV", key: "ArrowLeft" })
-            },
-            ArrowRight() {
-              if (isVertical) return
-              send({ type: "ARROW_NEXT", key: "ArrowRight" })
-            },
-            Home() {
-              send("HOME")
-            },
-            End() {
-              send("END")
-            },
-            Enter() {
-              send({ type: "ENTER" })
-            },
-          }
-
-          let key = getEventKey(event, state.context)
-          const exec = keyMap[key]
-
-          if (exec) {
-            event.preventDefault()
-            exec(event)
-          }
-        },
-      })
-    },
-
-    getTriggerState,
-
-    getTriggerProps(props) {
-      const { value, disabled } = props
-      const triggerState = getTriggerState(props)
-
-      return normalize.button({
-        ...parts.trigger.attrs,
-        role: "tab",
-        type: "button",
-        disabled,
-        dir: state.context.dir,
-        "data-orientation": state.context.orientation,
-        "data-disabled": dataAttr(disabled),
-        "aria-disabled": disabled,
-        "data-value": value,
-        "aria-selected": triggerState.selected,
-        "data-selected": dataAttr(triggerState.selected),
-        "data-focus": dataAttr(triggerState.focused),
-        "aria-controls": triggerState.selected ? dom.getContentId(state.context, value) : undefined,
-        "data-ownedby": dom.getListId(state.context),
-        "data-ssr": dataAttr(state.context.ssr),
-        id: dom.getTriggerId(state.context, value),
-        tabIndex: triggerState.selected && composite ? 0 : -1,
-        onFocus() {
-          send({ type: "TAB_FOCUS", value })
-        },
-        onBlur(event) {
-          const target = event.relatedTarget as HTMLElement | null
-          if (target?.getAttribute("role") !== "tab") {
-            send({ type: "TAB_BLUR" })
-          }
-        },
-        onClick(event) {
-          if (event.defaultPrevented) return
-          if (disabled) return
-          if (isSafari()) {
-            event.currentTarget.focus()
-          }
-          send({ type: "TAB_CLICK", value })
-        },
-      })
-    },
-
-    getContentProps(props) {
-      const { value } = props
-      const selected = state.context.value === value
-      return normalize.element({
-        ...parts.content.attrs,
-        dir: state.context.dir,
-        id: dom.getContentId(state.context, value),
-        tabIndex: composite ? 0 : -1,
-        "aria-labelledby": dom.getTriggerId(state.context, value),
-        role: "tabpanel",
-        "data-ownedby": dom.getListId(state.context),
-        "data-selected": dataAttr(selected),
-        "data-orientation": state.context.orientation,
-        hidden: !selected,
-      })
-    },
-
-    getIndicatorProps() {
-      return normalize.element({
-        id: dom.getIndicatorId(state.context),
-        ...parts.indicator.attrs,
-        dir: state.context.dir,
-        "data-orientation": state.context.orientation,
-        style: {
-          "--transition-property": "left, right, top, bottom, width, height",
-          "--left": indicator.rect?.left,
-          "--top": indicator.rect?.top,
-          "--width": indicator.rect?.width,
-          "--height": indicator.rect?.height,
-          position: "absolute",
-          willChange: "var(--transition-property)",
-          transitionProperty: "var(--transition-property)",
-          transitionDuration: indicator.transition ? "var(--transition-duration, 150ms)" : "0ms",
-          transitionTimingFunction: "var(--transition-timing-function)",
-          [isHorizontal ? "left" : "top"]: isHorizontal ? "var(--left)" : "var(--top)",
-        },
-      })
-    },
-  }
-}

package/src/tabs.dom.ts

@@ -1,56 +0,0 @@
-import { createScope, itemById, nextById, prevById, queryAll } from "@zag-js/dom-query"
-import { first, last } from "@zag-js/utils"
-import type { MachineContext as Ctx } from "./tabs.types"
-
-export const dom = createScope({
-  getRootId: (ctx: Ctx) => ctx.ids?.root ?? `tabs:${ctx.id}`,
-  getListId: (ctx: Ctx) => ctx.ids?.list ?? `tabs:${ctx.id}:list`,
-  getContentId: (ctx: Ctx, id: string) => ctx.ids?.content ?? `tabs:${ctx.id}:content-${id}`,
-  getTriggerId: (ctx: Ctx, id: string) => ctx.ids?.trigger ?? `tabs:${ctx.id}:trigger-${id}`,
-  getIndicatorId: (ctx: Ctx) => ctx.ids?.indicator ?? `tabs:${ctx.id}:indicator`,
-
-  getListEl: (ctx: Ctx) => dom.getById(ctx, dom.getListId(ctx)),
-  getContentEl: (ctx: Ctx, id: string) => dom.getById(ctx, dom.getContentId(ctx, id)),
-  getTriggerEl: (ctx: Ctx, id: string) => dom.getById(ctx, dom.getTriggerId(ctx, id)),
-  getIndicatorEl: (ctx: Ctx) => dom.getById(ctx, dom.getIndicatorId(ctx)),
-
-  getElements: (ctx: Ctx) => {
-    const ownerId = CSS.escape(dom.getListId(ctx))
-    const selector = `[role=tab][data-ownedby='${ownerId}']:not([disabled])`
-    return queryAll(dom.getListEl(ctx), selector)
-  },
-
-  getFirstTriggerEl: (ctx: Ctx) => first(dom.getElements(ctx)),
-  getLastTriggerEl: (ctx: Ctx) => last(dom.getElements(ctx)),
-  getNextTriggerEl: (ctx: Ctx, id: string) => nextById(dom.getElements(ctx), dom.getTriggerId(ctx, id), ctx.loopFocus),
-  getPrevTriggerEl: (ctx: Ctx, id: string) => prevById(dom.getElements(ctx), dom.getTriggerId(ctx, id), ctx.loopFocus),
-  getSelectedContentEl: (ctx: Ctx) => {
-    if (!ctx.value) return
-    return dom.getContentEl(ctx, ctx.value)
-  },
-  getSelectedTriggerEl: (ctx: Ctx) => {
-    if (!ctx.value) return
-    return dom.getTriggerEl(ctx, ctx.value)
-  },
-
-  getOffsetRect: (el: HTMLElement | undefined) => {
-    return {
-      left: el?.offsetLeft ?? 0,
-      top: el?.offsetTop ?? 0,
-      width: el?.offsetWidth ?? 0,
-      height: el?.offsetHeight ?? 0,
-    }
-  },
-
-  getRectById: (ctx: Ctx, id: string) => {
-    const tab = itemById(dom.getElements(ctx), dom.getTriggerId(ctx, id))
-    return dom.resolveRect(dom.getOffsetRect(tab))
-  },
-
-  resolveRect: (rect: Record<"width" | "height" | "left" | "top", number>) => ({
-    width: `${rect.width}px`,
-    height: `${rect.height}px`,
-    left: `${rect.left}px`,
-    top: `${rect.top}px`,
-  }),
-})

package/src/tabs.machine.ts

@@ -1,283 +0,0 @@
-import { createMachine, guards } from "@zag-js/core"
-import { clickIfLink } from "@zag-js/dom-event"
-import { nextTick, raf, getFocusables } from "@zag-js/dom-query"
-import { trackElementRect } from "@zag-js/element-rect"
-import { compact, isEqual } from "@zag-js/utils"
-import { dom } from "./tabs.dom"
-import type { MachineContext, MachineState, UserDefinedContext } from "./tabs.types"
-
-const { not } = guards
-
-export function machine(userContext: UserDefinedContext) {
-  const ctx = compact(userContext)
-  return createMachine<MachineContext, MachineState>(
-    {
-      initial: "idle",
-
-      context: {
-        dir: "ltr",
-        orientation: "horizontal",
-        activationMode: "automatic",
-        value: null,
-        loopFocus: true,
-        composite: true,
-        ...ctx,
-        focusedValue: ctx.value ?? null,
-        ssr: true,
-        indicatorState: {
-          rendered: false,
-          transition: false,
-          rect: { left: "0px", top: "0px", width: "0px", height: "0px" },
-        },
-      },
-
-      watch: {
-        value: ["allowIndicatorTransition", "syncIndicatorRect", "syncTabIndex", "clickIfLink"],
-        dir: ["syncIndicatorRect"],
-        orientation: ["syncIndicatorRect"],
-      },
-
-      on: {
-        SET_VALUE: {
-          actions: "setValue",
-        },
-        CLEAR_VALUE: {
-          actions: "clearValue",
-        },
-        SET_INDICATOR_RECT: {
-          actions: "setIndicatorRect",
-        },
-        SYNC_TAB_INDEX: {
-          actions: "syncTabIndex",
-        },
-      },
-
-      created: ["syncFocusedValue"],
-
-      entry: ["checkRenderedElements", "syncIndicatorRect", "syncTabIndex", "syncSsr"],
-
-      exit: ["cleanupObserver"],
-
-      states: {
-        idle: {
-          on: {
-            TAB_FOCUS: {
-              target: "focused",
-              actions: "setFocusedValue",
-            },
-            TAB_CLICK: {
-              target: "focused",
-              actions: ["setFocusedValue", "setValue"],
-            },
-          },
-        },
-        focused: {
-          on: {
-            TAB_CLICK: {
-              target: "focused",
-              actions: ["setFocusedValue", "setValue"],
-            },
-            ARROW_PREV: [
-              {
-                guard: "selectOnFocus",
-                actions: ["focusPrevTab", "selectFocusedTab"],
-              },
-              {
-                actions: "focusPrevTab",
-              },
-            ],
-            ARROW_NEXT: [
-              {
-                guard: "selectOnFocus",
-                actions: ["focusNextTab", "selectFocusedTab"],
-              },
-              {
-                actions: "focusNextTab",
-              },
-            ],
-            HOME: [
-              {
-                guard: "selectOnFocus",
-                actions: ["focusFirstTab", "selectFocusedTab"],
-              },
-              {
-                actions: "focusFirstTab",
-              },
-            ],
-            END: [
-              {
-                guard: "selectOnFocus",
-                actions: ["focusLastTab", "selectFocusedTab"],
-              },
-              {
-                actions: "focusLastTab",
-              },
-            ],
-            ENTER: {
-              guard: not("selectOnFocus"),
-              actions: "selectFocusedTab",
-            },
-            TAB_FOCUS: {
-              actions: ["setFocusedValue"],
-            },
-            TAB_BLUR: {
-              target: "idle",
-              actions: "clearFocusedValue",
-            },
-          },
-        },
-      },
-    },
-    {
-      guards: {
-        selectOnFocus: (ctx) => ctx.activationMode === "automatic",
-      },
-
-      actions: {
-        syncFocusedValue(ctx) {
-          if (ctx.value != null && ctx.focusedValue == null) {
-            ctx.focusedValue = ctx.value
-          }
-        },
-        selectFocusedTab(ctx) {
-          raf(() => {
-            const nullable = ctx.deselectable && ctx.value === ctx.focusedValue
-            const value = nullable ? null : ctx.focusedValue
-            set.value(ctx, value)
-          })
-        },
-        setFocusedValue(ctx, evt) {
-          if (evt.value == null) return
-          set.focusedValue(ctx, evt.value)
-        },
-        clearFocusedValue(ctx) {
-          set.focusedValue(ctx, null)
-        },
-        setValue(ctx, evt) {
-          const nullable = ctx.deselectable && ctx.value === ctx.focusedValue
-          const value = nullable ? null : evt.value
-          set.value(ctx, value)
-        },
-        clearValue(ctx) {
-          set.value(ctx, null)
-        },
-        focusFirstTab(ctx) {
-          raf(() => {
-            dom.getFirstTriggerEl(ctx)?.focus()
-          })
-        },
-        focusLastTab(ctx) {
-          raf(() => {
-            dom.getLastTriggerEl(ctx)?.focus()
-          })
-        },
-        focusNextTab(ctx) {
-          if (!ctx.focusedValue) return
-          const triggerEl = dom.getNextTriggerEl(ctx, ctx.focusedValue)
-          raf(() => {
-            if (ctx.composite) {
-              triggerEl?.focus()
-            } else if (triggerEl?.dataset.value != null) {
-              set.focusedValue(ctx, triggerEl.dataset.value)
-            }
-          })
-        },
-        focusPrevTab(ctx) {
-          if (!ctx.focusedValue) return
-          const triggerEl = dom.getPrevTriggerEl(ctx, ctx.focusedValue)
-          raf(() => {
-            if (ctx.composite) {
-              triggerEl?.focus()
-            } else if (triggerEl?.dataset.value != null) {
-              set.focusedValue(ctx, triggerEl.dataset.value)
-            }
-          })
-        },
-        checkRenderedElements(ctx) {
-          ctx.indicatorState.rendered = !!dom.getIndicatorEl(ctx)
-        },
-        syncTabIndex(ctx) {
-          raf(() => {
-            const contentEl = dom.getSelectedContentEl(ctx)
-            if (!contentEl) return
-            const focusables = getFocusables(contentEl)
-            if (focusables.length > 0) {
-              contentEl.removeAttribute("tabindex")
-            } else {
-              contentEl.setAttribute("tabindex", "0")
-            }
-          })
-        },
-        cleanupObserver(ctx) {
-          ctx.indicatorCleanup?.()
-        },
-        allowIndicatorTransition(ctx) {
-          ctx.indicatorState.transition = true
-        },
-        setIndicatorRect(ctx, evt) {
-          const value = evt.id ?? ctx.value
-          if (!ctx.indicatorState.rendered || !value) return
-
-          const triggerEl = dom.getTriggerEl(ctx, value)
-          if (!triggerEl) return
-
-          ctx.indicatorState.rect = dom.getRectById(ctx, value)
-          nextTick(() => {
-            ctx.indicatorState.transition = false
-          })
-        },
-        syncSsr(ctx) {
-          ctx.ssr = false
-        },
-        syncIndicatorRect(ctx) {
-          ctx.indicatorCleanup?.()
-
-          const value = ctx.value
-          if (!ctx.indicatorState.rendered || !value) return
-
-          const triggerEl = dom.getSelectedTriggerEl(ctx)
-          if (!triggerEl) return
-
-          ctx.indicatorCleanup = trackElementRect(triggerEl, {
-            getRect(el) {
-              return dom.getOffsetRect(el)
-            },
-            onChange(rect) {
-              ctx.indicatorState.rect = dom.resolveRect(rect)
-              nextTick(() => {
-                ctx.indicatorState.transition = false
-              })
-            },
-          })
-        },
-        clickIfLink(ctx) {
-          clickIfLink(dom.getSelectedTriggerEl(ctx))
-        },
-      },
-    },
-  )
-}
-
-const invoke = {
-  change: (ctx: MachineContext) => {
-    if (ctx.value == null) return
-    ctx.onValueChange?.({ value: ctx.value })
-  },
-  focusChange: (ctx: MachineContext) => {
-    if (ctx.focusedValue == null) return
-    ctx.onFocusChange?.({ focusedValue: ctx.focusedValue })
-  },
-}
-
-const set = {
-  value: (ctx: MachineContext, value: string | null) => {
-    if (isEqual(value, ctx.value)) return
-    ctx.value = value
-    invoke.change(ctx)
-  },
-  focusedValue: (ctx: MachineContext, value: string | null) => {
-    if (isEqual(value, ctx.focusedValue)) return
-    ctx.focusedValue = value
-    invoke.focusChange(ctx)
-  },
-}

package/src/tabs.props.ts

@@ -1,27 +0,0 @@
-import { createProps } from "@zag-js/types"
-import { createSplitProps } from "@zag-js/utils"
-import type { ContentProps, TriggerProps, UserDefinedContext } from "./tabs.types"
-
-export const props = createProps<UserDefinedContext>()([
-  "activationMode",
-  "composite",
-  "dir",
-  "getRootNode",
-  "id",
-  "ids",
-  "loopFocus",
-  "onFocusChange",
-  "onValueChange",
-  "orientation",
-  "translations",
-  "deselectable",
-  "value",
-])
-
-export const splitProps = createSplitProps<Partial<UserDefinedContext>>(props)
-
-export const triggerProps = createProps<TriggerProps>()(["disabled", "value"])
-export const splitTriggerProps = createSplitProps<TriggerProps>(triggerProps)
-
-export const contentProps = createProps<ContentProps>()(["value"])
-export const splitContentProps = createSplitProps<ContentProps>(contentProps)