Revert "fix: focus on close modal (#3967)" (#3987)

This reverts commit 3a97e74.

Signed-off-by: Alexandre Philibeaux <aphilibeaux@scaleway.com>

.changeset/beige-ladybugs-kiss.md

@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": patch
+---
+
+Hotfix of `<Modal />` component not working properly with disclosure

README.md

@@ -127,12 +127,15 @@ $ # If you do some changes into your package
 $ pnpm run build && yalc publish --push --sig # --push will automatically update the package on projects where it have been added, --sig updates the signature hash to trigger webpack update
 ```
 
-You can redo the same with `@ultraviolet/form` if you want to test it.
+You can redo the same with `@ultraviolet/form` if you want to test it
 
 > :warning: since [1.0.0.pre.51 (2021-04-23)](https://github.com/wclr/yalc/blob/master/CHANGELOG.md#100pre51-2021-04-23), `yalc publish` needs the `--sig` option to trigger webpack module actual update.
 
 > :warning: `yalc` create a `yalc.lock` and updates the `package.json` in the target project. **Make sure to not commit these changes**
 
+> :warning: if you are trying to yalc @ultraviolet/ui & @ultraviolet/form in your application and hope to see the change of @ultraviolet/ui into the component used by @ultraviolet/form you should be sure to not have any peerDeps of @ultraviolet/ui installed as it's will be resolve. If your are using pnpm and vite you can add "pnpm.override: { "@ultraviolet/ui": "$@ultraviolet/ui" }". If this is accepted rfc is accepted this will solve our issue https://github.com/pnpm/rfcs/blob/main/text/0001-catalogs.md 
+
+
 ---
 
 ## Versioning

packages/ui/src/components/Modal/Disclosure.tsx

@@ -1,5 +1,11 @@
 import type { PropsWithRef } from 'react'
-import { cloneElement, isValidElement, useEffect, useMemo } from 'react'
+import {
+  cloneElement,
+  createRef,
+  isValidElement,
+  useEffect,
+  useMemo,
+} from 'react'
 import type { DisclosureProps } from './types'
 
 export const Disclosure = ({
@@ -9,8 +15,9 @@ export const Disclosure = ({
   handleClose,
   toggle,
   id,
-  disclosureRef,
 }: DisclosureProps) => {
+  const disclosureRef = createRef<HTMLElement>()
+
   useEffect(() => {
     const element = disclosureRef.current
     element?.addEventListener('click', handleOpen)

packages/ui/src/components/Modal/index.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled'
 import type { ReactElement, ReactNode } from 'react'
 import type React from 'react'
-import { useCallback, useId, useRef, useState } from 'react'
+import { useCallback, useId, useState } from 'react'
 import { Button } from '../Button'
 import { Dialog } from './Dialog'
 import { Disclosure } from './Disclosure'
@@ -77,7 +77,6 @@ export const Modal = ({
   // Used for disclosure usage only
   const [visible, setVisible] = useState(false)
   const controlId = useId()
-  const disclosureRef = useRef<HTMLElement>(null)
 
   const handleOpen = useCallback(() => {
     setVisible(true)
@@ -93,8 +92,7 @@ export const Modal = ({
       }
       setVisible(false)
     }
-    disclosureRef.current?.focus()
-  }, [disclosureRef, onBeforeClose, onClose])
+  }, [onBeforeClose, onClose])
 
   const handleToggle = useCallback(() => {
     setVisible(current => !current)
@@ -113,7 +111,6 @@ export const Modal = ({
           handleClose={handleClose}
           visible={visible}
           toggle={handleToggle}
-          disclosureRef={disclosureRef}
         />
       ) : null}
       <Dialog

packages/ui/src/components/Modal/types.ts

@@ -41,7 +41,6 @@ export type DisclosureProps = {
   visible: ModalState['visible']
   toggle: ModalState['toggle']
   id: string
-  disclosureRef: React.RefObject<HTMLElement>
 }
 
 export type DialogProps = {