diff --git a/.changeset/beige-ladybugs-kiss.md b/.changeset/beige-ladybugs-kiss.md
new file mode 100644
index 0000000000..86eaf810d3
--- /dev/null
+++ b/.changeset/beige-ladybugs-kiss.md
@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": patch
+---
+
+Hotfix of `` component not working properly with disclosure
diff --git a/README.md b/README.md
index 2219d83afb..7cc0d6894d 100644
--- a/README.md
+++ b/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
diff --git a/packages/ui/src/components/Modal/Disclosure.tsx b/packages/ui/src/components/Modal/Disclosure.tsx
index 1fa8836dca..476e1e9b64 100644
--- a/packages/ui/src/components/Modal/Disclosure.tsx
+++ b/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()
+
useEffect(() => {
const element = disclosureRef.current
element?.addEventListener('click', handleOpen)
diff --git a/packages/ui/src/components/Modal/index.tsx b/packages/ui/src/components/Modal/index.tsx
index 7bdaa8e88b..bda4feaa13 100644
--- a/packages/ui/src/components/Modal/index.tsx
+++ b/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(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}