faceless-ui/modal

America's next top modal

Faceless UI

To regenerate search indices, run yarn build:cache.

modal's Issues

Add focusHandling features

returnFocus, trapFocus, and autoFocus

Console errors caused by enableBodyScroll

An update to the dependency body-scroll-lock may have recently surfaced additional errors.

We should address accordingly.

Modify asModal to retrieve slug from prop

Right now, the only way to use asModal is to pass the slug as the second argument, which doesn't allow for the modal to be used dynamically. To support dynamic instances, it needs to be able to retrieve its slug from a prop. This change should not depreciate the slug argument, however, by giving precedence to one or the other if both are present.

Support openOnInit prop

Unable to install version 2.0.1

It happened when create a payloadcms app.

No matching version found for @faceless-ui/modal@^2.0.1

➜  test npm show @faceless-ui/modal

@faceless-ui/[email protected] | MIT | deps: 4 | versions: 23
America's next top modal
https://github.com/faceless-ui/modal#readme

keywords: react, react-component, modal, dialog, drawer, mega-menu, popup, light-box, accessibility, ui, ux

dist
.tarball: https://registry.npmmirror.com/@faceless-ui/modal/-/modal-2.0.0.tgz
.shasum: fed257bafb22c915057af6856e8323281053e559
.integrity: sha512-V70q2JzeTKg6tjD61+J/50Y93VwQeAYsV5YwQvkXnGXI4/iU31UEA4qEL4wRuO3yzacs7UXCmo+ZnKNr4+wfxA==
.unpackedSize: 68.7 kB

dependencies:
body-scroll-lock: ^3.1.5       focus-trap: ^6.9.2             qs: ^6.9.1                     react-transition-group: ^4.4.2

maintainers:
- jacobsfletch <[email protected]>

dist-tags:
latest: 2.0.0

published a month ago by jacobsfletch <[email protected]>

Enhance ModalToggler with extended prop support

New props should include:

• htmlElement
• htmlAttributes
• style

See this example from React Parallax, lines 164-190.

Need ability to add additional url params

The current implementation allows for the modal slug to be updated, but the ability to send additional query params would be ideal.

Remove top and left css from .modal-item

Seeking help toggling burger using isModalOpen

Nextjs/Typescript novice here. I have a mobile menu using America's Favorite Modal (awesome!) however, I cannot sort out how to access the modal state "isOpen" from a sibling component. I am using Hamburger React

Everything is working great except I need to toggle the burger when

Here's what I have so far…

const MenuMobile = () => {
  return (
    <>
      <ModalToggler
        slug='menuMobile'
        className={styles.burger}>
        <Hamburger
          color='var(--light)'
          duration={0.25}
          label='Show menu'
          size={28}
          rounded
          // Todo: toggle burger on menu item click - use isModalOpen?
          // toggled={isOpen} toggle={setOpen}
        />
      </ModalToggler>
      <Modal slug='menuMobile'>
        <nav className={styles.menuMobile}>
          <ul>
            <li className={styles.menuItem}>
              <ModalToggler slug='menuMobile'>
                <Link href='/how-it-works'>How It Works</Link>
              </ModalToggler>
            </li>
etc.

Modal not fully trapping focus

Hey Faceless-UI Team, quick question(which might end up being an issue) does the modal inherently trap the entire focus within the modal?

While tabbing through a simple implementation, the focus switches out of the modal into my navbar. Is this the initial setting of the modal?

I can't share the current implementation as it's a client project, but the general idea is the focus leaves the modal and goes to the navbar links. Any clarity on this will be much appreciated

Sequentially close modals using `esc`

Using the escape key currently closes all modals, but now that multiple modals can be open simultaneously, it makes sense that these closes in sequential order, one-by-one. To do this, we can just add a openedOn property to the modal state, and compare values when choosing which to close.

Support multiple open modals

An example might be when a mega-menu is open on load, and a cookie banner is also displayed, and both are instances of modals.

Convert ModalProvider to functional component

Change internal URL param handling to be an opt-in feature

Right now you can opt-in to external param changes by sending a callback through the handleParamChange prop. One potential solution is to use the same handleParamChange prop, but sending it true instead of a callback function.

no way to initialize the modal outside of modal context

I am trying to integrate the modal with the slider but it is unable to toggle the modal if the slider is outside of the modal container. Is there a way to toggle the modal on the click of the slider image?

Expose transition event hooks

Add lockBodyScroll feature

Convert to TypeScript

Remove prop-types 🚮

Track reference to ModalContainer in place of DOM query

A successful implementation should depreciate this.

How to write test case for modal open on button click

I am writing a test for modal confirmation on button click. I am using faceless-ui/modal the click is working fine but the modal is not opening(Debug the screen no HTML is present for the modal).

 <Modal slug='deleteModal' className='delete-document'>
          <MinimalTemplate className='delete-document__template'>
            <h1>Confirm Delete</h1>
            <p>Are you sure you want to delete this user?</p>
            <p>{userToDelete && userToDelete.email}</p>
            <Button buttonStyle='secondary' className="modal-button" onClick={() => { deleteUser() }}>Yes</Button>
            <Button buttonStyle='secondary' className="modal-button" onClick={() => { closeModal('deleteModal') }}>Cancel</Button>
          </MinimalTemplate>
        </Modal>

const mockToggleModal = jest.fn()
jest.mock('@faceless-ui/modal', () => ({
  Modal: jest.fn(),
  useModal: jest.fn(jest.fn(() => ({
    toggleModal: mockToggleModal,
    closeModal: jest.fn(),
  }))),
}));

If I am not adding mocking for the modal then getting an error as

can not read properties of undefined ('deleteModal')

And with mocking Modal is not showing in DOM.

test('click on delete icon and popup open', async () => {
   const { container } = render(
     <MemoryRouter>
       <CustomDeleteButton rowData={rowData} />
     </MemoryRouter>
   );
  
   fireEvent.click(container.querySelector('#deleteButton'), new MouseEvent('click', { bubbles: true }));
  
   await waitFor(() => {
     expect(mockToggleModal).toHaveBeenCalled(); // this is working properly
     console.log(prettyDOM())
    
     // expect(screen.getByText('Are you sure you want to delete this user?')).toBeInTheDocument(); // this is not working
   })
 });

```Note: I tried different approaches like using act, adding delay

I tried different approaches like using act and adding delay. and I am expecting that Modal dom should show up in prettyDOM() or debug

using jest for unit test case

Support modal close on click outside

Scroll bug in Safari (Mobile)

This is only occurring in Safari on an iPhone. Cannot scroll within a drawer, content gets cut off.

How to style with tailwind?

Great library! But I'm not using SCSS in my project but I just wanted to try this out instead of headless-ui. How can I style this with tailwind?

Convert ModalContainer to functional component

Package update issue 1.1.0 -->2.0.1 (withModal)

Hello @jacobsfletch ,

I am currently in the process of updating our project to the latest version, moving from 1.1.0 to the most recent version available 2.0.1. Our project is built in a class-based component and utilizes the 'withModal' component.

However, during the update process, I encountered an error that is impeding the successful transition to the latest version. The error message I'm facing is
**export default withModal(HandleModalEvents);
^

error - components\utilities\HandleModalEvents\index.js (24:25) @ eval
error - unhandledRejection: TypeError: (0 , faceless_ui_modal__WEBPACK_IMPORTED_MODULE_3_.withModal) is not a function
at eval (webpack-internal:///./components/utilities/HandleModalEvents/index.js:32:127)
at ./components/utilities/HandleModalEvents/index.js**

I would greatly appreciate your guidance or any suggestions on how to resolve this issue. I'm eager to ensure that our project is up-to-date with the latest version and functioning smoothly.
Please let me know if you require any additional information or if there are specific details I should provide to better address this error.

Thanks,
Ripal

Allow `zIndex` strings

Sending a string through the zIndex works but is flagged by ts for not being of type number. Just need to allow string _or _ number for this property.

Support external routers

Currently, react-modal uses window.history.pushState to update the window location query.

This is not picked up on by React Router or NextJS' Router, so those tools are unable to pick up on the change and don't track the activity of the modal doing its thing.

I have some ideas for how this should be implemented in practice.