[Context] Improve Tooltip Error Message when Arrow is outside Position

[peduarte]

I was playing around with the Tooltip and I didn't think about the fact that the Arrow needed to be inside the Position Component.

I got this error:

Popper.Arrow must be used within Popper

Im not sure how doable this is, but it'd be great if the error message was:

Tooltip.Arrow must be used within Tooltip.Position

I think that would be a more helpful message since it represents what I've done. I understand that the Tooltip is built on top of the lower level Popper, but as I user I haven't imported or used that at all.

Cheers!

[benoitgrelard]

Yes, this has been bugging me for a while. I will think of a way we can override the component names in error messages that use abstractions.

[benoitgrelard]

I haven't looked at this for too long but here are my 2 cents.

There are a couple issues here:

First, createContext takes in and bakes in the rootComponentName used in the error message.
This is an issue because createContext is called statically in each files outside of all components, etc making it hard to eventually override these names.

I think for this, we could do this:

-export function createContext<ContextValueType>(displayName: string, rootComponentName: string) {
+export function createContext<ContextValueType>(displayName: string) {
  const Context = React.createContext<ContextValueType>(null as any);
  Context.displayName = displayName;
-  function useContext(componentName: string) {
+  function useContext(rootComponentName: string, componentName: string) {
    const context = React.useContext(Context);
    if (context === null) {
      throw new Error(
        `\`${componentName}\` must be used within \`${rootComponentName}\``
      );
    }
    return context;
  }
  return [Context, useContext] as const;
}

The second bit of info comes from each call site of a useXxxContext hook (returned by createContext).
In this case we could potentially allow overriding if we did something like this:

const PopperArrow = forwardRef<typeof ARROW_DEFAULT_TAG, PopperArrowProps>(function PopperArrow(
  props,
  forwardedRef
) {
-  const { as: Comp = Arrow, offset, ...arrowProps } = props;
+  const { as: Comp = Arrow, offset, usePopperContextArgs, ...arrowProps } = props;
-  const { arrowRef, setArrowOffset, arrowStyles } = usePopperContext(ARROW_NAME);
+  const { arrowRef, setArrowOffset, arrowStyles } = usePopperContext(
+    ...(usePopperContextArgs ?? [POPPER_NAME, ARROW_NAME])
+  );
…

And so in components that use an abstraction which uses some of these we'd do:

const TooltipArrow = forwardRef<typeof ARROW_DEFAULT_TAG, TooltipArrowProps>(function TooltipArrow(
  props,
  forwardedRef
) {
-  return <Popper.Arrow {...interopDataAttrObj('arrow')} {...props} ref={forwardedRef} />;
+  <Popper.Arrow
+      usePopperContextArgs={[TOOLTIP_NAME, ARROW_NAME]}
+      {...interopDataAttrObj('arrow')}
+      {...props}
+      ref={forwardedRef}
+    />
});

It's not very elegant but certainly would work.

Can anybody else think of something smarter? cc @jjenzz @chaance