Components composition

index.jsx

export const Base = () => {
  return (
    <Dialog.Root>
      <Tooltip.Root>
        <Tooltip.Trigger>
          <Dialog.Trigger>
            <MyButton aria-label="Open dialog">Open dialog</MyButton>
          </Dialog.Trigger>
        </Tooltip.Trigger>
        <Tooltip.Portal>…</Tooltip.Portal>
      </Tooltip.Root>
      <Dialog.Portal>...</Dialog.Portal>
    </Dialog.Root>
  );
};

export const Generic = () => {
  return (
    <Dialog.Root>
      <Tooltip.Root>
        <Tooltip.Trigger>
          <Dialog.Trigger as={MyButton} aria-label="Open dialog">
            Open dialog
          </Dialog.Trigger>
        </Tooltip.Trigger>
        <Tooltip.Portal>…</Tooltip.Portal>
      </Tooltip.Root>
      <Dialog.Portal>...</Dialog.Portal>
    </Dialog.Root>
  );
};

// https://base-ui.com/react/handbook/composition
export const Render = () => {
  return (
    <Dialog.Root>
      <Tooltip.Root>
        <Tooltip.Trigger
          render={(props) => (
            <Dialog.Trigger
              {...props}
              render={(props) => (
                <MyButton {...props} aria-label="Open dialog">
                  Open dialog
                </MyButton>
              )}
            />
          )}
        />
        <Tooltip.Portal>…</Tooltip.Portal>
      </Tooltip.Root>
      <Dialog.Portal>...</Dialog.Portal>
    </Dialog.Root>
  );
};

// https://base-ui.com/react/handbook/composition
export const Slot = () => {
  return (
    <Dialog.Root>
      <Tooltip.Root>
        <Tooltip.Trigger
          children={
            <Dialog.Trigger
              children={
                <MyButton aria-label="Open dialog">Open dialog</MyButton>
              }
            />
          }
        />
        <Tooltip.Portal>…</Tooltip.Portal>
      </Tooltip.Root>
      <Dialog.Portal>...</Dialog.Portal>
    </Dialog.Root>
  );
};

// https://www.radix-ui.com/primitives/docs/guides/composition
export const Radix = () => {
  return (
    <Dialog.Root>
      <Tooltip.Root>
        <Tooltip.Trigger asChild>
          <Dialog.Trigger asChild>
            <MyButton aria-label="Open dialog">Open dialog</MyButton>
          </Dialog.Trigger>
        </Tooltip.Trigger>
        <Tooltip.Portal>…</Tooltip.Portal>
      </Tooltip.Root>
      <Dialog.Portal>...</Dialog.Portal>
    </Dialog.Root>
  );
};

export const ChildrenSlot = () => {
  return (
    <Dialog.Root>
      <Tooltip.Root>
        <Tooltip.Trigger>
          {{
            into: (
              <Dialog.Trigger>
                {{
                  into: (
                    <MyButton aria-label="Open dialog">Open dialog</MyButton>
                  ),
                }}
              </Dialog.Trigger>
            ),
          }}
        </Tooltip.Trigger>
        <Tooltip.Portal>…</Tooltip.Portal>
      </Tooltip.Root>
      <Dialog.Portal>...</Dialog.Portal>
    </Dialog.Root>
  );
};

export const PropsDecorator = () => {
  return (
    <Dialog.Root>
      <Tooltip.Root>
        <MyButton
          {...withDialogTrigger(
            withTooltipTrigger({ "aria-label": "Open dialog" })
          )}
        >
          Open dialog
        </MyButton>
        <Tooltip.Portal>…</Tooltip.Portal>
      </Tooltip.Root>
      <Dialog.Portal>...</Dialog.Portal>
    </Dialog.Root>
  );
};

export const ElementDecorator = () => {
  return (
    <Dialog.Root>
      <Tooltip.Root>
        {withDialogTrigger(
          withTooltipTrigger(
            <MyButton aria-label="Open dialog">Open dialog</MyButton>
          )
        )}
        <Tooltip.Portal>…</Tooltip.Portal>
      </Tooltip.Root>
      <Dialog.Portal>...</Dialog.Portal>
    </Dialog.Root>
  );
};

export const ElementMethodDecorator = () => {
  return (
    <Dialog.Root>
      <Tooltip.Root>
        {Tooltip.Trigger.asChild(
          Dialog.Trigger.asChild(
            <MyButton aria-label="Open dialog">Open dialog</MyButton>
          )
        )}
        <Tooltip.Portal>…</Tooltip.Portal>
      </Tooltip.Root>
      <Dialog.Portal>...</Dialog.Portal>
    </Dialog.Root>
  );
};

export const ElementJsxDecorator = () => {
  return (
    <Dialog.Root>
      <Tooltip.Root>
        <Tooltip.Trigger.As>
          <Dialog.Trigger.As>
            <MyButton aria-label="Open dialog">Open dialog</MyButton>
          </Dialog.Trigger.As>
        </Tooltip.Trigger.As>
        <Tooltip.Portal>…</Tooltip.Portal>
      </Tooltip.Root>
      <Dialog.Portal>...</Dialog.Portal>
    </Dialog.Root>
  );
};