docs: fix refs type error in Basic Drawer component usage

[ryohidaka]

📝 Description

This PR prevents type definition errors when using the Basic Drawer Example.

⛳️ Current behavior (updates)

A TypeScript type definition error is detected when using the existing Basic Drawer Example Code.
This is not a problem in working, but if you have set restrictions at build time, such as with ESLint, you will need to use @ts-ignore or other means to deal with the problem.

Here is the error when opened in VSCode.

(property) ref?: React.LegacyRef<HTMLButtonElement> | undefined
Type 'MutableRefObject<undefined>' is not assignable to type 'LegacyRef<HTMLButtonElement> | undefined'.
  Type 'MutableRefObject<undefined>' is not assignable to type 'RefObject<HTMLButtonElement>'.
    Types of property 'current' are incompatible.
      Type 'undefined' is not assignable to type 'HTMLButtonElement | null'.ts(2322)
index.d.ts(138, 9): The expected type comes from property 'ref' which is declared here on type 'IntrinsicAttributes & OmitCommonProps<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, keyof ButtonProps> & ButtonProps & { ...; }'

(property) finalFocusRef?: React.RefObject<FocusableElement> | undefined
The ref of element to receive focus when the modal closes.

Type 'MutableRefObject<undefined>' is not assignable to type 'RefObject<FocusableElement>'.
  Types of property 'current' are incompatible.
    Type 'undefined' is not assignable to type 'FocusableElement | null'.ts(2322)
index.d.ts(115, 5): The expected type comes from property 'finalFocusRef' which is declared here on type 'IntrinsicAttributes & DrawerProps'

🚀 New behavior

By specifying current, the corresponding type definition error was suppressed.

💣 Is this a breaking change (Yes/No):

No

📝 Additional Information

This may be a temporary fix, but we would like to modify it so that it is not boring for beginning students who use Example.

Best regards,

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
chakra-ui-docs	✅ Ready (Inspect)	Visit Preview	Dec 7, 2022 at 1:42PM (UTC)

[segunadebayo]

Hi @ryohidaka,

This is not a fix for the issue. Accessing ref.current immediately in the Button element leads to its value being undefined