chakra-ui/zag @zag-js/react@2.0.0-next.2

on GitHub

Minor Changes

• #3252
  6d57458 Thanks
  @github-actions! - Separate the props you pass to useMachine from the
  props the machine sees after defaults are applied.

  • Fixed issue where omitting a required prop type-checked and then failed at runtime with
    [zag-js] missing required props. Affects async-list, carousel, dnd, gridlist, listbox, pin-input,
    select, splitter, toast and toc, whose required props were reported as optional.
  • Fixed issue where a prop listed as having a default lost null from its public type, so props that accept null
    rejected it.

  Machine schemas now declare the public props type plus a defaultPropKey union naming the props the machine fills in:

  export interface DialogSchema {
    props: DialogProps
    defaultPropKey: PropsWithDefault
  }

  Schemas that do not declare defaultPropKey keep the previous behaviour, so custom machines continue to work
  unchanged.

Patch Changes

• #3252
  06ddeb3 Thanks
  @github-actions! - - Fixed issue where initialFocusEl rejected null,
  despite it being handled at runtime. On dialog and drawer it was listed as a prop with a default, which stripped
  null | undefined from its public type.

  • Fixed issue where Portal's container rejected the RefObject<T | null> that React 19's useRef<T>(null)
    returns.

• #3304
  2859ef6 Thanks
  @segunadebayo! - Add watchEffect(deps, setup) to effect implementations, so an
  effect can re-run when the props or context it depends on change, without re-entering the state that owns it. It
  mirrors track in watch, which runs an action rather than an effect.

  effects: {
    trapFocus({ prop, watchEffect }) {
      return watchEffect([() => prop("trapFocus")], () => {
        if (!prop("trapFocus")) return
        return trapFocus(/* ... */)
      })
    },
  }

  Only the declared effect restarts, sibling effects and entry actions are untouched, and anything outside the call runs
  once. Deps must return a primitive, the same constraint track has, so use context.hash() for anything else. Unlike
  Vue's similarly named API, they are explicit rather than auto-tracked.

• Updated dependencies [6d57458,
  734b5e8,
  e8b99d2,
  2859ef6,
  2859ef6]:

  • @zag-js/core@2.0.0-next.2
  • @zag-js/types@2.0.0-next.2
  • @zag-js/utils@2.0.0-next.2
  • @zag-js/store@2.0.0-next.2