Add support for api.setDisabled?

[amirzahavi]

🚀 Feature request

Please describe your request in one or two sentences.

First of all thank you for this amazing project! ❤️
In all components there is no setDisabled option for manually disable the components using the api object

🧱 Problem Statement / Justification

Please provide valid reason(s) why this should added.

If this feaure is related to a problem you've noticed. Mention it as well

I'm using SolidJs and to sync props change i'm using createEffect and set the values with the api for exmple:

import * as radio from '@zag-js/radio-group';
import { normalizeProps, useMachine } from '@zag-js/solid';

export function RadioGroup(props){
  const [state, send] = useMachine(
    radio.machine({ ...props, id: createUniqueId() })
  );

  const api = createMemo(() => radio.connect(state, send, normalizeProps));

  createEffect(() => {
    if (props.value) {
      api().setValue(props.value);
    }
  });

  return <div {...api().rootProps}>...</div>
}
}

when disable prop is changed there is no way for me to disable the component dynamically.
another use-case could be a business logic calculated internally in the component to disable dynamically the component itself using the API.

✅ Proposed solution or API

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

add api().setDisable(true)

↩️ Alternatives

What alternative solutions have you considered before making this request?

it could be that the @zag-js/solid itself needs a fix to take effect when the props passed to useMachine(props) change,
maybe it would be helpful to pass the props as follow:

import {mergeProps} from 'solid-js';
import * as radio from '@zag-js/radio-group';
import { normalizeProps, useMachine } from '@zag-js/solid';

export function RadioGroup(props){
   const machineProps = mergeProps(props, {
    id: createUniqueId(),
  })
  const [state, send] = useMachine(
    radio.machine(machineProps)
  );
  // rest of comp.
}

📝 Additional Information

What resources (links, screenshots, etc.) do you have to assist this effort?

[segunadebayo]

Hi @amirzahavi,

We could improve the doc a bit more, but you can already do that with the following snippet.

import * as radio from '@zag-js/radio-group';
import { normalizeProps, useMachine } from '@zag-js/solid';
import { splitProps } from 'solid-js'

export function RadioGroup(props){
// 1. Split the props you need to be reactive
 const [contextProps, localProps] = splitProps(props, ["value", "disabled"])

  const [state, send] = useMachine(
    radio.machine({ id: createUniqueId() }),
   // 2. Transiently update the machine with the props
    { context: contextProps }
  );

  const api = createMemo(() => radio.connect(state, send, normalizeProps));

  return <div {...api().rootProps}>...</div>
}
}

Related Docs: https://zagjs.com/overview/programmatic-control#transient-updates

[amirzahavi]

Hi @segunadebayo,
Thanks a lot! That worked for me 😄

Yes, I think the docs can improve a little more regarding this section which I think is critical.

Either way, It still can be helpful in some scenarios to have the setDisable functionality available in the api(). in case we would like to disable the component within itself by some business logic.