Export `defaultSlot` in RAC or a way to workaround required slot errors

[jrmyio]

Provide a general summary of the feature here

We are using the Provider from react-aria-components to create our own components.

In order to allow components with and without slots inside a Provider we want to be able to configure the default so that we do not run into the error A slot prop is required.

However, since the default is a symbol and not exported in the react-aria-components we cannot use this pattern.

See:

react-spectrum/packages/react-aria-components/src/utils.tsx

Line 27 in ebc610d

export const defaultSlot = Symbol('default');

react-spectrum/packages/react-aria-components/src/index.ts

Line 18 in ebc610d

export {composeRenderProps, Provider, useContextProps, useSlottedContext} from './utils';

🤔 Expected Behavior?

Be able to use defaultSlot in custom components so we can prevent the error.

😯 Current Behavior

You run into an error A slot prop is required when not specifying a slot for a component while having siblings with slots.

💁 Possible Solution

When building our design system on top of RAC i felt that the slot errors are a quite the hassle. We've seen the errors come up multiple times and sometimes this was good and it catched a mistake on our part, but in general I think using a default empty object for the default instead of erroring out is a better default.

The other option is to add defaultSlot to react-aria-components exports to allow users to use the symbol just how RAC components uses it internally for its components.

🔦 Context

Sometimes we have buttons in our UI that have slots and are configured by a Provider higher up in the tree. Sometimes we have buttons that don't use context and thus don't have a slot.

We want to support both.

💻 Examples

Codesandbox example

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[LFDanLu]

I'm a bit unsure as to the exact parts being used here, just to make sure I understand: you are creating your own components and are using our RAC Provider within those components to shuttle props to slots like our components?
Maybe a small example in a codesandbox would be helpful in clearing this up.

[jrmyio]

I'm a bit unsure as to the exact parts being used here, just to make sure I understand: you are creating your own components and are using our RAC Provider within those components to shuttle props to slots like our components? Maybe a small example in a codesandbox would be helpful in clearing this up.

Yes this is exactly what we are doing. Here is a codesandbox (also just added this to OP):

https://codesandbox.io/p/sandbox/rac-provide-nested-slots-n44xk2?file=%2Fsrc%2FApp.tsx%3A45%2C18

[LFDanLu]

Thanks for the sandbox. We are fine with exposing the defaultSlot, but we will also need to document its usage in the Advanced Customization part of the docs.

[sookmax]

Looks like the following line was added in #5052, roughly 4 months ago.

react-spectrum/packages/react-aria-components/src/utils.tsx

Lines 167 to 170 in 46ae331

	if (slot === null) {
	// An explicit `null` slot means don't use context.
	return null;
	}

I created a sandbox using "react-aria-components": "^1.0.1", and it seems to work if you specify explicit null to slot prop like:

<Button
  slot={null}
  onPress={() =>
    console.log("I am a custom button but I need a slot")
  }
>
  Some other button
</Button>

[nmanumr]

I need this badly. also, Can we have slotCallback exported too?

[LFDanLu]

I think that should be fine as well. Do you need it for your types?

[devongovett]

I was hoping to remove slotCallback actually. I don't think we use it anymore. What do you need it for?

[nmanumr]

Actually, I had a use cases where i wanted to known when the child element is rendered. slotCallback came handy there. I can share the example code if you want.

[devongovett]

Ah. Another way to do that is with a callback ref:

let [hasSlot, setHasSlot] = useState(false);
let ref = useCallback(el => {
  setHasSlot(!!el);
}, []);

<SomeContext.Provider value={{ref}}>
  {children}
</SomeContext.Provider>

[nmanumr]

I had been implementing a component named Field which encapsulates field registration with react-hook-form I had been doing something like this:

const [name, setName] = useState('');

useController({name});

<SomeContext.Provider value={{
  [slotCallback]: ({name}) => {
    setName(name)
  },
}}>
</SomeContext.Provider>

But, I just realised this is unnecessary. and Infact I removed use of slotCallback.

This is how if anyone wondering

/**
 * This component help integrate react-hook-form with react-aria-fields.
 *
 * how exactly?
 * the solution is quite dumb but works well enough. We provide context values
 * for every possible react aria field. It covers binding field value, invalid state
 * and validation triggers with react aria fields. but we still have to take care of
 * refs (to focus the field on error) and the actual error message.
 *
 * For ref we manually traverse the dom tree after rendering and pass the input ref
 * to react-hook-form.
 *
 * For error messages we have to override FieldError component from react-aria,
 * provide to a custom context and utilize it in the FieldError component.
 */
export function Field({
                        children,
                        min,
                        max,
                        minLength,
                        maxLength,
                        required,
                        pattern,
                        deps,
                        ...props
                      }: FieldProps) {
  const { field: { value, onBlur, onChange, ref }, fieldState: { invalid, error } } = useController({
    ...props,
    rules: {
      deps,
      ...messagifyValidationRules({
        min, max, minLength, maxLength, required, pattern,
      }),
    },
  });

  return (
    <Provider
      values={[
        [FieldErrorContext, error ?? null],
        [CheckboxContext, {
          value: value,
          onChange: onChange,
          ref,
          isInvalid: invalid,
          validationBehavior: 'aria',
          name: props.name,
          isRequired: !!required,
        }],
        [CheckboxGroupContext, {
          value: value,
          onChange: onChange,
          ref: (el) => el && ref(getFocusableRef(el)),
          isInvalid: invalid,
          validationBehavior: 'aria',
          name: props.name,
          isRequired: !!required,
        }],
        [RadioGroupContext, {
          value: value,
          onBlur,
          onChange,
          ref: (el) => el && ref(getFocusableRef(el)),
          isInvalid: invalid,
          validationBehavior: 'aria',
          name: props.name,
          isRequired: !!required,
        }],
        [SliderContext, {
          value: value,
          onChange,
          ref: (el) => el && ref(getFocusableRef(el)),
          // todo: handle name and isRequired
        }],
        [SwitchContext, {
          value: value,
          onBlur,
          onChange,
          ref,
          name: props.name,
          // todo: handle isRequired
        }],
        [TextFieldContext, {
          value: value,
          onBlur,
          onChange,
          isInvalid: invalid,
          ref: (el) => el && ref(getFocusableRef(el)),
          validationBehavior: 'aria',
          name: props.name,
          isRequired: !!required,
        }],
        [NumberFieldContext, {
          value: value,
          onBlur,
          onChange,
          isInvalid: invalid,
          ref: (el) => el && ref(getFocusableRef(el)),
          validationBehavior: 'aria',
          name: props.name,
          isRequired: !!required,
        }],
      ]}
    >
      {children}
    </Provider>
  );
}