From 84f021e4e66d60baab7da4914b025ed4ed3275c1 Mon Sep 17 00:00:00 2001
From: lz405 <179817187+lz405@users.noreply.github.com>
Date: Tue, 1 Oct 2024 12:37:44 +0000
Subject: [PATCH] refactor(root): improve react code snippets

Improve react code snippets by changing them to a more common example

fix #1086
---
 .../components/popover-menu/code.mdx          | 104 +++++++++---------
 1 file changed, 55 insertions(+), 49 deletions(-)

diff --git a/src/content/structured/components/popover-menu/code.mdx b/src/content/structured/components/popover-menu/code.mdx
index 8d89efbe2..f349e1994 100644
--- a/src/content/structured/components/popover-menu/code.mdx
+++ b/src/content/structured/components/popover-menu/code.mdx
@@ -20,7 +20,7 @@ tabs:
 ---
 
 import { IcPopoverMenu, IcMenuItem, IcMenuGroup, IcButton } from "@ukic/react";
-import { useRef } from "react";
+import { useState } from "react";
 
 ## Component demo
 
@@ -77,7 +77,7 @@ export const snippets = [
   variant="icon"
   title="More information"
   id="button-1"
-  onClick={handleClick}
+  onClick={handlePopoverToggled}
 >
   <SlottedSVG
     slot="icon"
@@ -91,7 +91,7 @@ export const snippets = [
     <path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" />
   </SlottedSVG>
 </IcButton>
-<IcPopoverMenu anchor="button-1" aria-label="popover" ref={popoverEl}>
+<IcPopoverMenu anchor="button-1" aria-label="popover" open={popoverOpen} onIcPopoverClosed={handlePopoverClosed}>
   <IcMenuItem label="Copy code" />
   <IcMenuItem label="Paste code" />
   <IcMenuItem label="Actions" submenuTriggerFor="actions" />
@@ -104,10 +104,9 @@ export const snippets = [
       long: [
         {
           language: "Typescript",
-          snippet: `const popoverEl = useRef(null);
-const handleClick = () => {
-  popoverEl.current.open = !popoverEl.current.open;
-};
+          snippet: `const [popoverOpen, setPopoverOpen] = useState<boolean>(false);
+const handlePopoverToggled = () => setPopoverOpen(value => !value);
+const handlePopoverClosed = () => setPopoverOpen(false);
 return (
   <>
     {shortCode}
@@ -116,10 +115,9 @@ return (
         },
         {
           language: "Javascript",
-          snippet: `const popoverEl = useRef(null);
-const handleClick = () => {
-  popoverEl.current.open = !popoverEl.current.open;
-};
+          snippet: `const [popoverOpen, setPopoverOpen] = useState(false);
+const handlePopoverToggled = () => setPopoverOpen(value => !value);
+const handlePopoverClosed = () => setPopoverOpen(false);
 return (
   <>
     {shortCode}
@@ -132,17 +130,16 @@ return (
 ];
 
 export const DemoPopover = () => {
-  const popoverEl = useRef(null);
-  const handleClick = () => {
-    popoverEl.current.open = !popoverEl.current.open;
-  };
+  const [popoverOpen, setPopoverOpen] = useState(false);
+  const handlePopoverToggled = () => setPopoverOpen((value) => !value);
+  const handlePopoverClosed = () => setPopoverOpen(false);
   return (
     <>
       <IcButton
         variant="icon"
         title="More information"
         id="button-1"
-        onClick={handleClick}
+        onClick={handlePopoverToggled}
       >
         <svg
           slot="icon"
@@ -156,7 +153,12 @@ export const DemoPopover = () => {
           <path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" />
         </svg>
       </IcButton>
-      <IcPopoverMenu anchor="button-1" aria-label="popover" ref={popoverEl}>
+      <IcPopoverMenu
+        anchor="button-1"
+        aria-label="popover"
+        open={popoverOpen}
+        onIcPopoverClosed={handlePopoverClosed}
+      >
         <IcMenuItem label="Copy code" />
         <IcMenuItem label="Paste code" />
         <IcMenuItem label="Actions" submenuTriggerFor="actions" />
@@ -258,7 +260,7 @@ export const snippetsButtons = [
   variant="icon"
   title="More information"
   id="button-2"
-  onClick={handleClick}
+  onClick={handlePopoverToggled}
 >
   <SlottedSVG
     slot="icon"
@@ -272,7 +274,7 @@ export const snippetsButtons = [
     <path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" />
   </SlottedSVG>
 </IcButton>
-<IcPopoverMenu anchor="button-2" aria-label="popover" ref={popoverEl}>
+<IcPopoverMenu anchor="button-2" aria-label="popover" open={popoverOpen} onIcPopoverClosed={handlePopoverClosed}>
   <IcMenuItem label="Copy" disabled />
   <IcMenuItem label="Paste" keyboardShortcut="Cmd + V" />
   <IcMenuItem label="Edit" description="This is used to edit the original." />
@@ -297,10 +299,9 @@ export const snippetsButtons = [
       long: [
         {
           language: "Typescript",
-          snippet: `const popoverEl = useRef(null);
-const handleClick = () => {
-  popoverEl.current.open = !popoverEl.current.open;
-};
+          snippet: `const [popoverOpen, setPopoverOpen] = useState<boolean>(false);
+const handlePopoverToggled = () => setPopoverOpen(value => !value);
+const handlePopoverClosed = () => setPopoverOpen(false);
 return (
   <>
     {shortCode}
@@ -309,10 +310,9 @@ return (
         },
         {
           language: "Javascript",
-          snippet: `const popoverEl = useRef(null);
-const handleClick = () => {
-  popoverEl.current.open = !popoverEl.current.open;
-};
+          snippet: `const [popoverOpen, setPopoverOpen] = useState(false);
+const handlePopoverToggled = () => setPopoverOpen(value => !value);
+const handlePopoverClosed = () => setPopoverOpen(false);
 return (
   <>
     {shortCode}
@@ -325,17 +325,16 @@ return (
 ];
 
 export const ButtonsPopover = () => {
-  const popoverEl = useRef(null);
-  const handleClick = () => {
-    popoverEl.current.open = !popoverEl.current.open;
-  };
+  const [popoverOpen, setPopoverOpen] = useState(false);
+  const handlePopoverToggled = () => setPopoverOpen((value) => !value);
+  const handlePopoverClosed = () => setPopoverOpen(false);
   return (
     <>
       <IcButton
         variant="icon"
         title="More information"
         id="button-2"
-        onClick={handleClick}
+        onClick={handlePopoverToggled}
       >
         <svg
           slot="icon"
@@ -349,7 +348,12 @@ export const ButtonsPopover = () => {
           <path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" />
         </svg>
       </IcButton>
-      <IcPopoverMenu anchor="button-2" aria-label="popover" ref={popoverEl}>
+      <IcPopoverMenu
+        anchor="button-2"
+        aria-label="popover"
+        open={popoverOpen}
+        onIcPopoverClosed={handlePopoverClosed}
+      >
         <IcMenuItem label="Copy" disabled />
         <IcMenuItem label="Paste" keyboardShortcut="Cmd + V" />
         <IcMenuItem
@@ -438,7 +442,7 @@ export const snippetsGroups = [
   variant="icon"
   title="More information"
   id="button-3"
-  onClick={handleClick}
+  onClick={handlePopoverToggled}
 >
   <SlottedSVG
     slot="icon"
@@ -452,7 +456,7 @@ export const snippetsGroups = [
     <path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" />
   </SlottedSVG>
 </IcButton>
-<IcPopoverMenu anchor="button-3" aria-label="popover" ref={popoverEl}>
+<IcPopoverMenu anchor="button-3" aria-label="popover" open={popoverOpen} onIcPopoverClosed={handlePopoverClosed}>
   <IcMenuGroup label="Edit options">
     <IcMenuItem label="Copy" disabled />
     <IcMenuItem label="Paste" keyboardShortcut="Cmd + V" />
@@ -465,10 +469,9 @@ export const snippetsGroups = [
       long: [
         {
           language: "Typescript",
-          snippet: `const popoverEl = useRef<HTMLIcPopoverMenuElement | null>(null);
-const handleClick = () => {
-  popoverEl.current.open = !popoverEl.current.open;
-};
+          snippet: `const [popoverOpen, setPopoverOpen] = useState<boolean>(false);
+const handlePopoverToggled = () => setPopoverOpen(value => !value);
+const handlePopoverClosed = () => setPopoverOpen(false);
 return (
   <>
     {shortCode}
@@ -477,10 +480,9 @@ return (
         },
         {
           language: "Javascript",
-          snippet: `const popoverEl = useRef(null);
-const handleClick = () => {
-  popoverEl.current.open = !popoverEl.current.open;
-};
+          snippet: `const [popoverOpen, setPopoverOpen] = useState(false);
+const handlePopoverToggled = () => setPopoverOpen(value => !value);
+const handlePopoverClosed = () => setPopoverOpen(false);
 return (
   <>
     {shortCode}
@@ -493,17 +495,16 @@ return (
 ];
 
 export const GroupsPopover = () => {
-  const popoverEl = useRef(null);
-  const handleClick = () => {
-    popoverEl.current.open = !popoverEl.current.open;
-  };
+  const [popoverOpen, setPopoverOpen] = useState(false);
+  const handlePopoverToggled = () => setPopoverOpen((value) => !value);
+  const handlePopoverClosed = () => setPopoverOpen(false);
   return (
     <>
       <IcButton
         variant="icon"
         title="More information"
         id="button-3"
-        onClick={handleClick}
+        onClick={handlePopoverToggled}
       >
         <svg
           slot="icon"
@@ -517,7 +518,12 @@ export const GroupsPopover = () => {
           <path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" />
         </svg>
       </IcButton>
-      <IcPopoverMenu anchor="button-3" aria-label="popover" ref={popoverEl}>
+      <IcPopoverMenu
+        anchor="button-3"
+        aria-label="popover"
+        open={popoverOpen}
+        onIcPopoverClosed={handlePopoverClosed}
+      >
         <IcMenuGroup label="Edit options">
           <IcMenuItem label="Copy" disabled />
           <IcMenuItem label="Paste" keyboardShortcut="Cmd + V" />