🚀 Feature request

I'd like to be able to access the final value (clamped, rounded, formatted, etc.) from @zag-js/number-input in a blur event handler (in React, if it matters).

🧱 Problem Statement / Justification

Currently, if I provide an onBlur function through the mergeProps helper, it behaves just like if I were to skip mergeProps and attach it directly to the input, which means the value in the event is whatever raw value the input had when the blur event occurred. That is, Zag's processing has not occurred yet. Zag responds to the same blur event and manipulates the value accordingly as it transitions from the focused state to the idle state, and then a final change event occurs (after the blur event) with the final value from Zag.

✅ Proposed solution or API

Maybe Zag can perform its work prior to invoking handlers provided via mergeProps? This would break anyone currently depending on getting the raw/pre-processed value, though. Alternatively, perhaps Zag could expose a duplicate handler for every event that currently causes it to do its work (e.g., onZagBlur or onBlurFinal) which is fired after the work is done? Not sure of the best solution.

↩️ Alternatives

I've considered trying to track the overall state of things myself in the consuming code and fire what I need accordingly, but it's a bit tricky and feels like it should be doable with Zag natively.

📝 Additional Information

Demo: https://codesandbox.io/s/upbeat-cdn-j8pyry?file=/src/App.tsx

Use-case: fire some event (e.g., a fetch) on blur (but not on change) that needs the final/formatted value

If you delete the contents of the number input and blur out, it should revert to the default value rather than remaining as an empty string. Or this should at least be an option.

🐛 Bug report

Hi! I was trying out @zag-js/number-input and was able to input 2 characters at once inside a PinInput box.

💥 Steps to reproduce

1. Render a PinInput
2. Focus on the first box.
3. Smash two different keys at the same time
4. See error

💻 Link to reproduction

Tested locally with React and a couple keyboards ^^ but also in the docs example: https://zagjs.com/components/react/pin-input

🧐 Expected behavior

From the docs I understand that 1 digit or letter is allowed per box:

The input fields allow one character at a time.

🧭 Possible Solution

I don't know.

🌍 System information

📝 Additional information

I tried the same in chakra-ui docs but could not reproduce it.

🐛 Bug report

So this is difficult to reproduce and debug, sorry about that. I love what you are building here so felt it is important that I let you know what we discovered when our application went to production using your accordion component. We found that in some situations the accordion won't open.

💥 Steps to reproduce

1. Using an IOS device
2. Open a link to your website from either Instagram, Gmail, FB or LinkeIn
3. The link will open in a webview
4. Try to click the button to open the accordion
5. Nothing happens.

💻 Link to reproduction

CodeSandbox reproduction: https://your-codesandbox-link-goes-here.io

🧐 Expected behavior

The accordion should open when the button is 'touched'.

🧭 Possible Solution

I don't know what could be causing this. FYI the in app webview for Slack and Twitter work fine 🙄

🌍 System information

📝 Additional information

This issue provides visibility into Renovate updates and their statuses. Learn more

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

• chore(deps): lock file maintenance

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update dependency vue to v3.2.37
• fix(deps): update dependency chalk to v5
• fix(deps): update dependency commander to v9
• fix(deps): update dependency gzip-size to v7
• fix(deps): update dependency jest-watch-typeahead to v1
• fix(deps): update dependency lint-staged to v13
• fix(deps): update dependency pretty-bytes to v6
• fix(deps): update jest monorepo to v28 (major) (@types/jest, jest)
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

🚀 Feature request

Rotation of the arrow based on placement options

🧱 Problem Statement / Justification

When using the popper with the arrow, I often want borders on the the sides of the arrow which face the trigger. But then I have to set up data-attributes that take in the placement and add the borders appropriately (top and left borders when bottom positioned, bottom and right borders when top positioned).

✅ Proposed solution or API

It would be much easier to change the rotation of the arrow to 45, 135, 225, 315 if when the arrow is positioned bottom, left, top and right positioned resp. Then I can just add borders to the top and left of my arrow and not need to worry about the placement in my code.

↩️ Alternatives

Adding my own data attributes

In an ideal world, I'd really love for Zag to work seamlessly with XState. I'm more than happy to switch to @xstate/fsm when it has the key features we need.

For now, we'll focus on supporting XState Visualizer. Here are the tasks that come to mind:

• Write a code mod or script to convert the machine's configuration to XState (we can skip the machine options)
• Write a script to convert the machine configuration to a PNG/SVG format
• Setup a CI action on PRs that tracks changes in the .machine files and shows the before/after logic changes

Within useMachine, we're doing this

machine.clone()

That clone method messes with the internal and caused items to be undefined or produces inconsistent instances. Let's get rid of clone all together and stick with functions

• support screen reader announcements (with and without section)
• user can provide objects as values
• user can decide what gets rendered in the input value
• user can control when the popup opens
• support for error message and help text
• Move event handling to the combobox popup instead of option items (for performance)
• Add openOnFocus prop (If it's not readonly)
• Add closeOnSelect prop

🚀 Feature request

When using Pin Input component in numeric, I would like to allow user to paste specials characters (like "-")

🧱 Problem Statement / Justification

I've received the following email :

When i copy paste 063-569 my code input component doesn't work because of the - character.

✅ Proposed solution or API

// pin-input.types.ts

type PublicContext = DirectionProperty & {
   ...
   whiteList: string
}

// pin-input.machine.ts

export function machine(ctx: UserDefinedContext = {}) {
  return createMachine<MachineContext, MachineState>({
    ...,
    context: {
      whiteList: ''
     }
  })
})

function isValidType(value: string, type: MachineContext["type"], whiteList: MachineContext["whiteList"]) {
  if (!type) return true
  const filteredValue = [...value].filter(char => !whiteList.includes(char)).join()
  return !!REGEX[type]?.test(filteredValue)
}

and use it like this :

useMachine(pinInput.machine({ whiteList: '-' }))

↩️ Alternatives

There is no alternative, because alphanumeric doesn't allow special characters.

• Re-entry: transitions with the same explicit target must do self transitions (exit -> actions -> enter)

We use Cypress to test the components across the frameworks we support.

It'll be great to have cypress tests run in parallel in a Github Action for every PR.

🚀 Feature request

Able to still position elements correctly when the component is inside a shadow dom.

🧱 Problem Statement / Justification

Document referenced in useSetup Is always the outer html document which bypasses the shadow root when the component is inside there. The base doc should be the shadow root for the positioning to work correctly.

✅ Proposed solution or API

Change all occurrences of ownerDocument to getRootNode(). This will return the regular html doc when not inside a shadow dom and the shadow root when the component is there. This makes all the positioning for tooltips/popovers work.

📝 Additional Information

https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode

Reported by Doman in Discord

1. Input some tags.
2. Type something in the input tag.
3. Delete one of the tags already set.
4. Hit enter.
5. Then the input tag will not work at all, can’t type and delete.

Codesandbox: https://codesandbox.io/s/zag-js-tags-input-hy0tsz?file=/src/TagsInput.tsx

🐛 Bug report

Setting precision to 0 seems to disable rounding (that is, leave the value alone), as opposed to rounding the values to whole numbers (integers). Is this intentional behavior or a bug? If intentional, is there a way to round to whole numbers?

💥 Steps to reproduce

1. Go to https://zagjs.com/components/react/number-input
2. Change precision to "0" (if not already)
3. Type "12.34" in the "Enter number" input on the left
4. Tab out
5. Observe the value remains 12.34 as opposed to 12

💻 Link to reproduction

N/A, see Zag's own Number Input page linked above.

🧐 Expected behavior

I would expect it to round to the nearest whole number when precision is 0 (perhaps some other value like undefined would disable rounding all together?).

🧭 Possible Solution

Not sure.

🌍 System information

📝 Additional information

Thank you.

🚀 Feature request

Please describe your request in one or two sentences.

Despite Vue 3 now being the default version, there are still many users who have to stay on Vue 2. (Read more)

Currently, Zag only supports Vue 3. Since Zag has a goal of providing framework-agnostic logic, I wish be able to reuse the same component logic in Vue 2 using Zag.

✅ Proposed solution or API

Please provide code snippets, gists, or links to the ideal design or API

• Using vue-demi to write Universal Vue Libraries for Vue 2 & 3
• Writing two separate wrapper for vue2 (adding @zag-js/vue2)
  • <=2.6 : exports from vue + @vue/composition-api with plugin auto installing.
  • 2.7: exports from vue (Composition API is built-in in Vue 2.7).

• Create the utils package with multiple entry points
• Create each component package
• Set up a bundle size measurement tool
• Bundle each component machine using ESBuild

Experiencing a strange issue, which seems to be specific to Firefox.

With a number input with min=0, if you decrement down to 0, when you try to increment again, nothing happens the first time you click.

https://www.loom.com/share/c5c16c794e984b0e9e24a0d586a8a4d0

https://stackblitz.com/github/johtso/xstate-remix/tree/zag-issue

• Here the styles claim data-part="root" and data-part="range" have a data-focus attribute.

But they don’t here

We should add this :

"data-focus": dataAttr(isFocused)

to rootProps and rangeProps in that file. Make it follow alphabetical order with the properties in those objects

• Here the styles also claim that data-part="root" has a data-invalid attribute.

But it doesn't in that same file

We should add this:

"data-invalid": dataAttr(isInvalid)

to rootProps in that file. Don't forget alphabetic order.

🐛 Bug report

Menu emits double click events when closeOnSelect: false, because of a technical issue, due to the following code snippet:

        onPointerUp(event) {
          const evt = getNativeEvent(event)
          if (!evt.isPrimary || disabled) return
          event.currentTarget.click()
        },

I guess this is just an oversight. There are multiple problems in this approach:

1. If the goal is to prevent non-left clicks, isPrimary doesn't do that according to MDN. Can use evt.button to decide if it's a left click or not.
2. This event handler does nothing to prevent the other onClick handler from being triggered regardless of isPrimary. I'd have expected stopPropogation or preventDefault or return false or such.
3. Neither stopPropogation nor preventDefault nor return false will prevent the other onClick handler from running. pointerup event apparently cannot cancel the upcoming click event.
4. Due to event.currentTarget.click(), click events happen twice, so onClick handlers run twice. For checkboxes, that means they are toggled twice.
5. This bug is only observable when closeOnSelect: false because when closeOnSelect: true, the menu is closed on the first click so it prevents the second click from happening.
6. It seems click event's button prop doesn't actually reflect the button that is pressed. It's always 0 even if it's a different button.

My proposal(s)

Option 1. Drop onClick handlers and rely on onPointerUp only, if it's so important to only respect left clicks.

Option 2. Drop onPointerUp handler and rely only on onClick handlers, if it's not very important to handle middle/right clicks.

Option 3. Try hard to prevent non-left clicks. Integrate onPointerUp into the state machine, in onPointerUp event check whether if evt.button === 0 and emit "LEFT_CLICK_UP" and in onClick, emit CLICK and do the proper state transition only if LEFT_CLICK_UP is followed up by a CLICK, but this still sounds naive. There are myriad of edge cases like user holding left button pressed and release it on another element etc. Why bother? Let people click with whatever button they want.

I'd pick "Option 2" for now so that the bug that completely breaks checkboxes with closeOnSelect: false is fixed, and create a followup github issue to prevent non-left clicks (which I think will not be trivial to achieve) in future.

💥 Steps to reproduce

1. Add closeOnSelect: false to menu-options.ts in next-ts example project.
2. Try clicking checkboxes.
3. (BONUS) Add debugger in onPointerUp and in both onClick handlers in menu.connect.ts.

Expected behavior

Checkboxes toggle.

Actual behavior

Checkboxes don't toggle.

Codesandbox

I suggest you see with your own eyes, with a debugger.

But here you go: https://codesandbox.io/s/gallant-ellis-cq0wyr?file=/src/App2.js

🌍 System information

• Move trackFormReset and trackFieldsetDisabled to @zag-js/form-utils

Machines without form reset listeners

• Rating

How;
In Activities

 trackFormReset(ctx) {
      return trackFormReset(dom.getInputEl(ctx), () => {
           ctx.value = ctx.initialValue
      })
},

// Add to activities
      activities: ["trackFormReset"],

Most implementations of the ARIA spec assume a Listbox popup Combobox when there are 2-3 types of Combobox (with different interaction patterns)

We need to have:

• Listbox Combobox @ui-machines/combobox
• Grid Combobox @ui-machines/grid-combobox

type AccordionOptions = { ... }
type AccordionPrivateContext = { ... }

type AccordionContext = AccordionOptions & AccordionPrivateContext

• We'll never export the AccordionContext to the user. Only the AccordionOptions
• Computed context will be part of our internal/private context

🐛 Bug report

If the slider is within a containing block that is not the root dom node, clicking on the slider moves the thumb to the wrong place. It appears to be erroneously adding the slider root's X offset from the root dom node to whatever X position the thumb should be at.

For example, for the following set up in React:

<div style={{ padding: '100px' }}>
  <div style={{ position: 'relative' }}>
    <Slider /> /* as from the zag js slider docs */
  </div>
</div>

When you click on the slider, the thumb moves to 100px right of where you clicked (it appears that way at least).

This may be affecting other Zag components like RangeSlider but I haven't checked.

💥 Steps to reproduce

1. Create a containing block that is offset from the root dom node. (as seen above)
2. Add slider within the containing block
3. Click on the slider. The thumb is in the wrong place.

💻 Link to reproduction

CodeSandbox reproduction: https://codesandbox.io/s/adoring-snowflake-ifyk13?file=/src/App.tsx

🧐 Expected behavior

Thumb is where you click.

🧭 Possible Solution

I haven't looked at the source, but it seems like the thumb position is being calculated based on the root dom node rather than the slider's root element. Any positioning logic for the slider should be contained within the slider root element. APIs like ResizeObserver can help with this: https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver

🌍 System information

🚀 Feature request

Would there be support for expo/react-native in the future? Wondering if it's possible given the architecture

We currently assume that we know the slider thumbs at the initial render. We need a way to update the machine state when new slider thumbs are added to the DOM. This usually means that the values array will also be updated, so we can react to that to update slider thumb positions.

Currently both have data-part="spin-button".

• After transitions
• Every transitions
• Choose action

🐛 Bug report

Conditional expressions in target breaks visualizer

💥 Steps to reproduce

Use a conditional expression in dialog SETUP target, then check visualizer

We need to update the pages on examples/solid-ts to match the pages in examples/next-ts

I added an example for the accordion component, we can use that as a guide to creating the other components. Toast and Tooltip might be tricky for now. I'll handle those myself.

Solidjs is a new UI framework we’re looking to support in the machines, it’s very similar to react but better.

• tags-input
• combobox
• slider
• range-slider
• split-view
• accordion
• editable
• toast
• menu
• pin-input
• number-input
• popover
• dialog
• tooltip

At the moment, the return type of normalizeProps is set to Record<string, any>

We need to update the normalizeProps return type for each framework and update all components connect function to use a generic.

React
incoming props (React.XElementAttributes) --> connect --> outgoing props (React.XElementAttributes)

Vue
incoming props (React.XElementAttributes) --> connect --> outgoing props (ElementAttrs<X>)

Solid
incoming props (React.XElementAttributes) --> connect --> outgoing props (JSX.HTMLAttributes[X])

It'll be great to have a deploy preview of the example projects in every PR we make. It'll help us catch and manually test regressions when the Playwright tests fail.

• Create Vercel setup for examples/*
• Setup matrix for playwright Github actions
• Get all tests passing

🐛 Bug report

When you render multiple instances of the Number Input, the initial value of every instance following the first instance quickly gets replaced with the initial value of the first instance (after briefly being correctly set to their own initial values).

💥 Steps to reproduce

1. Render multiple number inputs with different initial values
2. Observe they all start out correct but quickly change to the initial value of the first

💻 Link to reproduction

CodeSandbox reproduction: https://codesandbox.io/s/stupefied-lake-effyhv?file=/src/App.js

🧐 Expected behavior

I would expect all instances to be completely independent (and in this case, respect their individual initial values).

🧭 Possible Solution

No clue.

🌍 System information

📝 Additional information

Thank you.

For each machine, we have types for context and state. We need to add the types for the events as well.

In the process, we can consider updating the event type names to be more intuitive.

🚀 Feature request

Media player logic.

🧱 Problem Statement / Justification

I wanted a headless video player for years. Thought about using XState, but too heavy like you noticed. Using Web Components as an abstraction is too heavy. Also want same API to control animation libs.

Maybe this + Mitosis for 'the one player to rule them all'?

✅ Proposed solution or API

Start: mattpocock/xstate-catalogue#47
I can build something via XState visualizer, might take some time.

↩️ Alternatives

https://github.com/btwld/vxdk

📝 Additional Information

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement
https://mifi.github.io/react-lottie-player/
https://www.remotion.dev/docs/player
https://github.com/vidstack/vidstack

🚀 Feature request

Vue, React, Solid, why not Svelte?

🚀 Feature request

New Checkbox Machine

🐛 Bug report

The precision option of Number Input doesn't always seem to be taken into account (or I've misunderstood it). For example, setting precision to 2 and typing "12.345678" results in "12.346" when I would expect "12.35". Setting precision to anything other than 3 still results in the value being rounded to the third decimal place on blur, so maybe 3 is the default and the option is being ignored entirely in that scenario? If you wipe out the value completely and use inc/dec buttons, that does seem to honor precision though.

NB: Happens whenever precision is lower than 3

💥 Steps to reproduce

1. Go to https://zagjs.com/components/react/number-input
2. Change precision to "2"
3. Type "12.345678" in the "Enter number" input on the left
4. Tab out
5. Observe the value has been rounded to 12.346 instead of 12.35

💻 Link to reproduction

CodeSandbox reproduction: https://codesandbox.io/s/hungry-bush-1fzk87?file=/src/App.js

(Note: had to disable React 18 StrictMode to get it to work at all.)

🧐 Expected behavior

I would expect it to round to the decimal place specified in the precision option.

🧭 Possible Solution

Not sure.

🌍 System information

📝 Additional information

🚀 Feature request

I posted this as a discussion a few months ago but thought I would instead submit it as a proper feature request. Zag looks like a pretty sweet library and I'm thinking of switching out React-ARIA with Zag on a project. One thing for me that Zag.js is missing (understandably as the library was just released) is a button component that handles accessibility/keyboard navigation like React-ARIA.

🧱 Problem Statement / Justification

Buttons are a basic component for any component library. Even though they seem simple on the surface, there's a lot of work involved with smoothing out behavior across different kinds of devices (touch/mouse/keyboard) while supporting a pleasant developer experience. Pitching a headless framework to my team is a hard sell without a button

📝 Additional Information

https://react-spectrum.adobe.com/react-aria/useButton.html
https://react-spectrum.adobe.com/blog/building-a-button-part-1.html
https://mui.com/base/react-button/#the-usebutton-hook

🐛 Bug report

💥 Steps to reproduce

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

💻 Link to reproduction

CodeSandbox reproduction: https://your-codesandbox-link-goes-here.io

🧐 Expected behavior

🧭 Possible Solution

🌍 System information

📝 Additional information

🐛 Bug report

Dynamically changing the disabled option of the slider machine does not affect its enabled/disabled state. It seems like the only way to change it is to remount/rekey the slider with disabled set to the desired value. There are situations where this is less than ideal and could cause other bugs.

💥 Steps to reproduce

1. Set up slider per the docs
2. Set the disabled option of the slider machine to a boolean piece of state
3. Change the state from false to true or vice versa after the slider has mounted. Notice that the slider's enabled status is not affected

💻 Link to reproduction

CodeSandbox reproduction: https://codesandbox.io/s/billowing-forest-21bvc4?file=/src/App.tsx

🧐 Expected behavior

If disabled is dynamically changed to true, I expect the slider to be disabled and no longer respond to user events

🌍 System information

🚀 Feature request

Please describe your request in one or two sentences.
Hello,

Do you plan to support Mitosis? It share a lot similarity with Solid.js

Thanks for the good library.

🐛 Bug report

The disabled attribute of the context is always false by default, even if we set it to true in the initial context; because the trackFieldsetDisabled activity, sets it to false.

🧐 Expected behavior

🐛 Bug report

It looks like packages/types/src/jsx.d.ts was introduced in #178 but didn't make it into the published output on npm? We're seeing the following error:

node_modules/@zag-js/types/dist/index.d.ts:1:26 - error TS2307: Cannot find module './jsx' or its corresponding type declarations.

import type { JSX } from "./jsx";

and jsx.d.ts seems to be missing: https://unpkg.com/browse/@zag-js/[email protected]/dist/

💥 Steps to reproduce

1. Install and import Zag v0.1.11 in a TS project (e.g., @zag-js/react + @zag-js/number-input)
2. Run tsc
3. Observe type error

💻 Link to reproduction

CSB probably not necessary here, but I will create one if that's helpful.

🧐 Expected behavior

No TS errors.

🧭 Possible Solution

Publish a new version that includes jsx.d.ts?

🌍 System information

📝 Additional information

N/A

🐛 Bug report

Attempting to use a description in a Toast component, I can set the description but am unable to access it from inside the toast.

💥 Steps to reproduce

1. Create a Toast component that uses api.description

function Toast({actor}: {actor: toast.Service}): JSX.Element {
  // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
  const [state, send] = useActor(actor)
  const toastApi = toast.connect<PropTypes>(state, send, normalizeProps)

  function onToastDismiss(): void {
    toastApi.dismiss()
  }

  return (
    <div className="toast max-w-lg pointer-events-auto flex flex-col" {...toastApi.rootProps}>
      <div className="toast-header inline-flex items-center justify-between">
      <h3 className="m-0" {...toastApi.titleProps}>{toastApi.title}</h3>
      <p>{toastApi.description}</p>
      <button type="button" className="btn btn-link" onClick={onToastDismiss}>
        <Icon icon="mdi:close" />
        <span className="sr-only">Dismiss</span>
        </button>
        </div>
      <div {...toastApi.progressbarProps} />
    </div>
  )
}

2. set up the toast api

  const [state, send] = useMachine(
    toast.group.machine({
      offsets: {
        top: '1rem',
        right: '1rem',
        bottom: '1rem',
        left: '1rem'
      },
      id: uuid()
    })
  )
  const apiToast = toast.group.connect(state, send, normalizeProps) 

3. Create a toast with a description

  apiToast.create({
        type: 'info',
        title: 'Buy package',
        description: 'Please sign the transaction in your wallet',
        placement: 'bottom-end',
        duration: 7000
      })

4. Trigger the Toast and observe the lack of description.

💻 Link to reproduction

Error in ts
Property 'description' does not exist on type '{ type: Type; title: string | undefined; placement: Placement; isVisible: boolean; isPaused: boolean; pause(): void; resume(): void; dismiss(): void; rootProps: Dict<any>; progressbarProps: Dict<...>; titleProps: Dict<...>; closeButtonProps: Dict<...>; render(): any; }

🧐 Expected behavior

I expected the description to render in the Toast.

🌍 System information