chakra-ui/zag @zag-js/core@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
  734b5e8 Thanks
  @github-actions! - Improved performance of state machine hot paths, and
  fixed an equality bug that could leave derived values stale.

  • Cached state chains and tag lookups per machine config, so nested state transitions and hasTag no longer rebuild
    the chain on every call.
  • Made isEqual cheaper by comparing arrays in place instead of copying them.
  • Fixed issue where a value that lost a key compared equal to its wider previous value. Removing a key from an object
    now correctly invalidates memoized values and restarts watchEffect effects that depend on it.
  • Fixed issue where the date input rebuilt its segments on every render when a translations object was passed
    inline.

  isEqual now compares functions by reference rather than by source text, and only considers an object's own
  properties. Values that relied on the previous behavior (a function recreated inline, or a property inherited from a
  prototype) now compare as unequal.

• #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 [2668edc,
  06ddeb3,
  734b5e8,
  2859ef6,
  2859ef6]:

  • @zag-js/dom-query@2.0.0-next.2
  • @zag-js/utils@2.0.0-next.2