Expose @faceless-ui/modal for plugin builders

[Utzel-Butzel]

When building a plugin which uses the Drawer component from payload/components/elements,I can control it via the DrawerToggler (also from payload/components/elements).

To build my own custom DrawerToggler I want to use import { useModal } from '@faceless-ui/modal' directly, but since it is getting imported directly from inside my plugin useModule does not get access to the original react context from the payload library.

If I understood correctly it is not simply possible to access the context from two libraries (https://stackoverflow.com/questions/70076361/how-to-share-context-between-multiple-libraries)

Would it be possible (and useful) to expose useModal from payload, so I can use it inside payloads react context and would you like a PR on that?

import { useModal } from `payload/components/elements`;

Simplified example of my code:

import React, { useCallback } from 'react'
import { Button, Drawer, DrawerToggler } from 'payload/components/elements' // Using this Drawer works
import { useModal } from '@faceless-ui/modal'

export const DrawerTogglerCustomized: React.FC<TogglerProps> = ({
  children,
  onClick,
  slug,
  ...rest
}) => {
  const { openModal } = useModal()
  console.log('openModal', openModal) // Returns empty object since it can't access the context of 'payload/components/elements'

  const handleClick = useCallback(
    e => {
      openModal(slug)
      if (typeof onClick === 'function') onClick(e)
    },
    [openModal, slug, onClick],
  )

  return (
    <a  onClick={handleClick}  {...rest}>
      {children}
    </a>
  )
}

export const Translator: React.FC = () => {
  return (
    <>
      <DrawerTogglerCustomized slug="ai-translator">
        Translator
      </DrawerTogglerCustomized>
      <Drawer title="Translator" slug="ai-translator">
        This is the drawer
      </Drawer>
    </>
  )
}

[jacobsfletch]

Hey @Utzel-Butzel I know exactly what you're talking about here and you're spot on regarding duplicative contexts. In Payload 3.0, we're splitting all of our UI components into a new @payloadcms/ui package (details here: #293). This package already includes exports for @facelessui/modal components. Do you have plans to migrate to 3.0 once its out? Otherwise I'd be willing to patch 2.0 for this.

[Utzel-Butzel]

Hi @jacobsfletch It is for a payload plugin I'm working on: https://github.com/wirewirewirewire/payload-ai Since at the moment I just use it for one of my own projects which I will upgrade to 3.0 this is totally fine. I'll give it a try with with the latest version. Thanks a lot!