From c0fbc36e12fd7dfc54764715654aa99b56feb9b3 Mon Sep 17 00:00:00 2001
From: "vinu.ganesan" <vinu.ganesan@swordgroup.in>
Date: Wed, 20 Dec 2023 11:22:11 +0530
Subject: [PATCH 1/5] Added button variant for UConfirmationButton

---
 .../components/UConfirmationButtonExample.js  | 60 ++++++++++++++++++-
 .../UConfirmationButton.js                    | 21 ++++++-
 2 files changed, 77 insertions(+), 4 deletions(-)

diff --git a/example/src/components/UConfirmationButtonExample.js b/example/src/components/UConfirmationButtonExample.js
index 1be1ccd0d..496fa742d 100644
--- a/example/src/components/UConfirmationButtonExample.js
+++ b/example/src/components/UConfirmationButtonExample.js
@@ -1,12 +1,29 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { UConfirmationButton } from 'unicef-material-ui'
-import { Typography, Grid } from '@material-ui/core'
+import {
+  Typography,
+  Grid,
+  IconButton,
+  Menu,
+  MenuItem,
+  Link,
+} from '@material-ui/core'
 import LinkOffIcon from '@material-ui/icons/LinkOff'
+import MoreVertIcon from '@material-ui/icons/MoreVert'
+
 export default function UConfirmationButtonExample() {
+  const [anchorEl, setAnchorEl] = useState(null)
+  const open = Boolean(anchorEl)
   const itemId = 1
   function handleDelete(event, id) {
     console.log(id)
   }
+  function handleClick(event) {
+    setAnchorEl(event.currentTarget)
+  }
+  function handleClose() {
+    setAnchorEl(null)
+  }
 
   return (
     <Grid container>
@@ -35,11 +52,48 @@ export default function UConfirmationButtonExample() {
       </Grid>
       <Grid item xs={12} sm={4} md={3}>
         <Typography variant="subtitle1">Menu item variant</Typography>
+        <IconButton
+          aria-label="more"
+          aria-controls="menu-item-variant"
+          aria-haspopup="true"
+          onClick={handleClick}
+        >
+          <MoreVertIcon />
+        </IconButton>
+        <Menu
+          id="menu-item-variant"
+          anchorEl={anchorEl}
+          keepMounted
+          open={open}
+          onClose={handleClose}
+          disableEnforceFocus={true}
+        >
+          <MenuItem onClick={handleClose}>
+            <Link href="#" underline="none">
+              Edit
+            </Link>
+          </MenuItem>
+          <MenuItem onClick={handleClose}>
+            <Link href="#" underline="none">
+              View
+            </Link>
+          </MenuItem>
+          <UConfirmationButton
+            onConfirm={handleDelete}
+            id={itemId}
+            buttonText="Delete"
+            variant="menuItem"
+            icon={null}
+          />
+        </Menu>
+      </Grid>
+      <Grid item xs={12} sm={4} md={3}>
+        <Typography variant="subtitle1">Button variant</Typography>
         <UConfirmationButton
           onConfirm={handleDelete}
           id={itemId}
           buttonText="Delete"
-          variant="menuItem"
+          variant="button"
         />
       </Grid>
       <Grid item xs={12} sm={4} md={3}>
diff --git a/src/components/UConfirmationButton/UConfirmationButton.js b/src/components/UConfirmationButton/UConfirmationButton.js
index fa26e9068..0cac1dfb0 100644
--- a/src/components/UConfirmationButton/UConfirmationButton.js
+++ b/src/components/UConfirmationButton/UConfirmationButton.js
@@ -10,6 +10,7 @@ import {
   DialogContent,
   Typography,
   DialogActions,
+  Box,
 } from '@material-ui/core'
 import DeleteOutlinedIcon from '@material-ui/icons/DeleteOutlined'
 import UButton from '../UButton'
@@ -30,6 +31,7 @@ const CONTROL_VARIANTS = {
   popup: 'popup',
   menuItem: 'menuItem',
   icon: 'icon',
+  button: 'button',
 }
 
 /**
@@ -49,6 +51,7 @@ export default function UConfirmationButton(props) {
     confirmText,
     confirmActionText,
     cancelText,
+    buttonVariant,
   } = props
   const [deleteAnchorEl, setDeleteAnchorEl] = useState(null)
   const [openDialog, setOpenDialog] = useState(false)
@@ -76,8 +79,20 @@ export default function UConfirmationButton(props) {
       {variant === CONTROL_VARIANTS.menuItem ? (
         <MenuItem onClick={handleClick} className={classes.menuLabel}>
           {icon}
-          <span className={classes.span}>{buttonText}</span>
+          <Box component="span" className={icon ? classes.span : ''}>
+            {buttonText}
+          </Box>
         </MenuItem>
+      ) : variant === CONTROL_VARIANTS.button ? (
+        <UButton
+          startIcon={icon}
+          onClick={handleClick}
+          aria-controls={`delete-confirmation-menu-${id}`}
+          aria-haspopup="true"
+          variant={buttonVariant}
+        >
+          {buttonText}
+        </UButton>
       ) : (
         <Tooltip title={buttonText} placement="top">
           <IconButton
@@ -136,6 +151,7 @@ UConfirmationButton.propTypes = {
     CONTROL_VARIANTS.popup,
     CONTROL_VARIANTS.menuItem,
     CONTROL_VARIANTS.icon,
+    CONTROL_VARIANTS.button,
   ]),
   /** if the variant is menuitem, this prop make sure the item enable or not */
   enabled: PropTypes.bool,
@@ -147,6 +163,8 @@ UConfirmationButton.propTypes = {
   confirmActionText: PropTypes.string,
   /** custom icon */
   icon: PropTypes.element,
+  /** Button variant applied to menuItem button */
+  buttonVariant: PropTypes.string,
 }
 
 UConfirmationButton.defaultProps = {
@@ -157,4 +175,5 @@ UConfirmationButton.defaultProps = {
   confirmActionText: 'Yes, delete',
   cancelText: 'No',
   icon: <DeleteOutlinedIcon />,
+  buttonVariant: 'text',
 }

From 8ddc9ea97cb0a9a4a0c6ab47272dd9b4bb81a167 Mon Sep 17 00:00:00 2001
From: "vinu.ganesan" <vinu.ganesan@swordgroup.in>
Date: Wed, 20 Dec 2023 11:22:52 +0530
Subject: [PATCH 2/5] Package version updated

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 3c2b14d25..3ded84618 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@unicef/material-ui",
-  "version": "0.11.5",
+  "version": "0.11.6",
   "description": "UNICEF theme and components of material-ui for react",
   "main": "index.js",
   "files": [

From 976e833ae32da4df4aeab1b2d001e91abbccb9e4 Mon Sep 17 00:00:00 2001
From: "vinu.ganesan" <vinu.ganesan@swordgroup.in>
Date: Wed, 20 Dec 2023 19:24:48 +0530
Subject: [PATCH 3/5] Update example and document

---
 .../components/UConfirmationButtonExample.js  |  2 +-
 .../UConfirmationButton.js                    |  2 +-
 .../UConfirmationButton.md                    | 55 ++++++++++++++++++-
 3 files changed, 54 insertions(+), 5 deletions(-)

diff --git a/example/src/components/UConfirmationButtonExample.js b/example/src/components/UConfirmationButtonExample.js
index 496fa742d..6dbe5717a 100644
--- a/example/src/components/UConfirmationButtonExample.js
+++ b/example/src/components/UConfirmationButtonExample.js
@@ -104,7 +104,7 @@ export default function UConfirmationButtonExample() {
           onConfirm={handleDelete}
           id={itemId}
           buttonText="Unlink"
-          variant="menuItem"
+          variant="button"
           confirmText="Confirm unlink?"
           confirmActionText="Yes, unlink"
           icon={<LinkOffIcon />}
diff --git a/src/components/UConfirmationButton/UConfirmationButton.js b/src/components/UConfirmationButton/UConfirmationButton.js
index 0cac1dfb0..46f871c6d 100644
--- a/src/components/UConfirmationButton/UConfirmationButton.js
+++ b/src/components/UConfirmationButton/UConfirmationButton.js
@@ -146,7 +146,7 @@ UConfirmationButton.propTypes = {
   buttonText: PropTypes.string,
   /** trigger confirmation function */
   onConfirm: PropTypes.func.isRequired,
-  /** variant: menu or icon */
+  /** variant: popup or menuItem or icon or button */
   variant: PropTypes.oneOf([
     CONTROL_VARIANTS.popup,
     CONTROL_VARIANTS.menuItem,
diff --git a/src/components/UConfirmationButton/UConfirmationButton.md b/src/components/UConfirmationButton/UConfirmationButton.md
index aa42aea94..dce0c8db1 100644
--- a/src/components/UConfirmationButton/UConfirmationButton.md
+++ b/src/components/UConfirmationButton/UConfirmationButton.md
@@ -1,13 +1,24 @@
 Delete button with examples:
 
 ```jsx
-import { Typography, Grid } from '@material-ui/core'
+import React, { useState } from 'react'
+import { Typography, Grid, Menu, MenuItem, Link, IconButton } from '@material-ui/core'
 import LinkOffIcon from '@material-ui/icons/LinkOff'
+import MoreVertIcon from '@material-ui/icons/MoreVert'
 
+  const [anchorEl, setAnchorEl] = useState(null)
+
+  const open = Boolean(anchorEl)
   const itemId = 1
   function handleDelete(event, id) {
     console.log(id)
   }
+  function handleClick(event) {
+    setAnchorEl(event.currentTarget)
+  }
+  function handleClose() {
+    setAnchorEl(null)
+  }
 
     <Grid container>
       <Grid item xs={12} sm={4} md={3}>
@@ -20,11 +31,49 @@ import LinkOffIcon from '@material-ui/icons/LinkOff'
       </Grid>
       <Grid item xs={12} sm={4} md={3}>
         <Typography variant="subtitle1">Menu item variant</Typography>
+        <IconButton
+          aria-label="more"
+          aria-controls="menu-item-variant"
+          aria-haspopup="true"
+          onClick={handleClick}
+        >
+          <MoreVertIcon />
+        </IconButton>
+        <Menu
+          id="menu-item-variant"
+          anchorEl={anchorEl}
+          keepMounted
+          open={open}
+          onClose={handleClose}
+          disableEnforceFocus={true}
+        >
+          <MenuItem onClick={handleClose}>
+            <Link href="#" underline="none">
+              Edit
+            </Link>
+          </MenuItem>
+          <MenuItem onClick={handleClose}>
+            <Link href="#" underline="none">
+              View
+            </Link>
+          </MenuItem>
+          <UConfirmationButton
+            onConfirm={handleDelete}
+            id={itemId}
+            buttonText="Delete"
+            variant="menuItem"
+            icon={null}
+          />
+        </Menu>
+      </Grid>
+      <Grid item xs={12} sm={4} md={3}>
+        <Typography variant="subtitle1">Button variant</Typography>
         <UConfirmationButton
           onConfirm={handleDelete}
           id={itemId}
           buttonText="Delete"
-          variant="menuItem"
+          variant="button"
+          icon={null}
         />
       </Grid>
       <Grid item xs={12} sm={4} md={3}>
@@ -33,7 +82,7 @@ import LinkOffIcon from '@material-ui/icons/LinkOff'
           onConfirm={handleDelete}
           id={itemId}
           buttonText="Unlink"
-          variant="menuItem"
+          variant="button"
           confirmText='Confirm unlink?'
           confirmActionText='Yes, unlink'
           icon={<LinkOffIcon />}

From 69925e471b99ce8cca959806fbbd2b9281fb8ef5 Mon Sep 17 00:00:00 2001
From: "vinu.ganesan" <vinu.ganesan@swordgroup.in>
Date: Thu, 21 Dec 2023 11:27:03 +0530
Subject: [PATCH 4/5] UConfirmationButton enhancment and example updated

---
 .../components/UConfirmationButtonExample.js  | 232 ++++++++++++------
 .../UConfirmationButton.js                    |  31 ++-
 .../UConfirmationButton.md                    | 221 ++++++++++++-----
 3 files changed, 333 insertions(+), 151 deletions(-)

diff --git a/example/src/components/UConfirmationButtonExample.js b/example/src/components/UConfirmationButtonExample.js
index 6dbe5717a..cd8b82dc6 100644
--- a/example/src/components/UConfirmationButtonExample.js
+++ b/example/src/components/UConfirmationButtonExample.js
@@ -12,17 +12,24 @@ import LinkOffIcon from '@material-ui/icons/LinkOff'
 import MoreVertIcon from '@material-ui/icons/MoreVert'
 
 export default function UConfirmationButtonExample() {
-  const [anchorEl, setAnchorEl] = useState(null)
-  const open = Boolean(anchorEl)
-  const itemId = 1
+  const [anchorEl, setAnchorEl] = useState({ menu: null, popup: null })
+  const openMenuVariant = Boolean(anchorEl.menu)
+  const openPopupVariant = Boolean(anchorEl.popup)
+
   function handleDelete(event, id) {
     console.log(id)
   }
-  function handleClick(event) {
-    setAnchorEl(event.currentTarget)
+  function handleClick(event, type) {
+    setAnchorEl({
+      ...anchorEl,
+      [type]: event.currentTarget,
+    })
   }
-  function handleClose() {
-    setAnchorEl(null)
+  function handleClose(type) {
+    setAnchorEl({
+      ...anchorEl,
+      [type]: null,
+    })
   }
 
   return (
@@ -32,83 +39,154 @@ export default function UConfirmationButtonExample() {
           Confirmation button
         </Typography>
       </Grid>
-      <Grid item xs={12} sm={4} md={3}>
-        <Typography variant="subtitle1">Popup variant</Typography>
-        <UConfirmationButton
-          confirmText="Are you sure you want to delete the item?"
-          onConfirm={handleDelete}
-          id={itemId}
-          buttonText="Delete"
-          variant="popup"
-        />
-      </Grid>
-      <Grid item xs={12} sm={4} md={3}>
-        <Typography variant="subtitle1">Icon variant</Typography>
-        <UConfirmationButton
-          onConfirm={handleDelete}
-          id={itemId}
-          buttonText="Delete"
-        />
+      <Grid item xs={12}>
+        <Typography variant="subtitle1">Confirmation popup variant</Typography>
       </Grid>
-      <Grid item xs={12} sm={4} md={3}>
-        <Typography variant="subtitle1">Menu item variant</Typography>
-        <IconButton
-          aria-label="more"
-          aria-controls="menu-item-variant"
-          aria-haspopup="true"
-          onClick={handleClick}
-        >
-          <MoreVertIcon />
-        </IconButton>
-        <Menu
-          id="menu-item-variant"
-          anchorEl={anchorEl}
-          keepMounted
-          open={open}
-          onClose={handleClose}
-          disableEnforceFocus={true}
-        >
-          <MenuItem onClick={handleClose}>
-            <Link href="#" underline="none">
-              Edit
-            </Link>
-          </MenuItem>
-          <MenuItem onClick={handleClose}>
-            <Link href="#" underline="none">
-              View
-            </Link>
-          </MenuItem>
+      <Grid container item xs={12}>
+        <Grid item xs={12} sm={6} md={3}>
+          <Typography variant="subtitle1">Icon</Typography>
+          <UConfirmationButton
+            confirmText="Are you sure you want to delete the item?"
+            onConfirm={handleDelete}
+            id={1}
+            buttonText="Delete"
+            confirmationVariant="popup"
+          />
+        </Grid>
+        <Grid item xs={12} sm={6} md={3}>
+          <Typography variant="subtitle1">Menu item</Typography>
+          <IconButton
+            aria-label="more"
+            aria-controls="menu-item-variant-confirm-popup"
+            aria-haspopup="true"
+            onClick={e => handleClick(e, 'popup')}
+          >
+            <MoreVertIcon />
+          </IconButton>
+          <Menu
+            id="menu-item-variant-confirm-popup"
+            anchorEl={anchorEl.popup}
+            keepMounted
+            open={openPopupVariant}
+            onClose={() => handleClose('popup')}
+            disableEnforceFocus={true}
+          >
+            <MenuItem onClick={() => handleClose('popup')}>
+              <Link href="#" underline="none">
+                Edit
+              </Link>
+            </MenuItem>
+            <MenuItem onClick={() => handleClose('popup')}>
+              <Link href="#" underline="none">
+                View
+              </Link>
+            </MenuItem>
+            <UConfirmationButton
+              onConfirm={handleDelete}
+              id={2}
+              confirmText="Are you sure you want to delete the item?"
+              buttonText="Delete"
+              variant="menuItem"
+              icon={null}
+              confirmationVariant="popup"
+            />
+          </Menu>
+        </Grid>
+        <Grid item xs={12} sm={6} md={3}>
+          <Typography variant="subtitle1">Button</Typography>
           <UConfirmationButton
             onConfirm={handleDelete}
-            id={itemId}
+            id={3}
+            confirmText="Are you sure you want to delete the item?"
             buttonText="Delete"
-            variant="menuItem"
-            icon={null}
+            variant="button"
+            confirmationVariant="popup"
+          />
+        </Grid>
+        <Grid item xs={12} sm={6} md={3}>
+          <Typography variant="subtitle1">Custom icon</Typography>
+          <UConfirmationButton
+            onConfirm={handleDelete}
+            id={4}
+            buttonText="Unlink"
+            variant="button"
+            confirmText="Are you sure you want to unlink the item?"
+            confirmActionText="Yes, unlink"
+            confirmationVariant="popup"
+            icon={<LinkOffIcon />}
           />
-        </Menu>
+        </Grid>
       </Grid>
-      <Grid item xs={12} sm={4} md={3}>
-        <Typography variant="subtitle1">Button variant</Typography>
-        <UConfirmationButton
-          onConfirm={handleDelete}
-          id={itemId}
-          buttonText="Delete"
-          variant="button"
-        />
+      <Grid item xs={12}>
+        <Typography variant="subtitle1">Confirmation menu variant</Typography>
       </Grid>
-      <Grid item xs={12} sm={4} md={3}>
-        <Typography variant="subtitle1">
-          Custom icon and confirm text
-        </Typography>
-        <UConfirmationButton
-          onConfirm={handleDelete}
-          id={itemId}
-          buttonText="Unlink"
-          variant="button"
-          confirmText="Confirm unlink?"
-          confirmActionText="Yes, unlink"
-          icon={<LinkOffIcon />}
-        />
+      <Grid container item xs={12}>
+        <Grid item xs={12} sm={6} md={3}>
+          <Typography variant="subtitle1">Icon</Typography>
+          <UConfirmationButton
+            onConfirm={handleDelete}
+            id={5}
+            buttonText="Delete"
+          />
+        </Grid>
+        <Grid item xs={12} sm={6} md={3}>
+          <Typography variant="subtitle1">Menu item</Typography>
+          <IconButton
+            aria-label="more"
+            aria-controls="menu-item-variant-confirm-menu"
+            aria-haspopup="true"
+            onClick={e => handleClick(e, 'menu')}
+          >
+            <MoreVertIcon />
+          </IconButton>
+          <Menu
+            id="menu-item-variant-confirm-menu"
+            anchorEl={anchorEl.menu}
+            keepMounted
+            open={openMenuVariant}
+            onClose={() => handleClose('menu')}
+            disableEnforceFocus={true}
+          >
+            <MenuItem onClick={() => handleClose('menu')}>
+              <Link href="#" underline="none">
+                Edit
+              </Link>
+            </MenuItem>
+            <MenuItem onClick={() => handleClose('menu')}>
+              <Link href="#" underline="none">
+                View
+              </Link>
+            </MenuItem>
+            <UConfirmationButton
+              onConfirm={handleDelete}
+              id={6}
+              buttonText="Delete"
+              variant="menuItem"
+              icon={null}
+            />
+          </Menu>
+        </Grid>
+        <Grid item xs={12} sm={6} md={3}>
+          <Typography variant="subtitle1">Button</Typography>
+          <UConfirmationButton
+            onConfirm={handleDelete}
+            id={7}
+            buttonText="Delete"
+            variant="button"
+          />
+        </Grid>
+        <Grid item xs={12} sm={6} md={3}>
+          <Typography variant="subtitle1">Custom icon</Typography>
+          <UConfirmationButton
+            onConfirm={handleDelete}
+            id={8}
+            buttonText="Unlink"
+            variant="button"
+            confirmText="Confirm unlink?"
+            confirmActionText="Yes, unlink"
+            icon={<LinkOffIcon />}
+          />
+        </Grid>
       </Grid>
     </Grid>
   )
diff --git a/src/components/UConfirmationButton/UConfirmationButton.js b/src/components/UConfirmationButton/UConfirmationButton.js
index 46f871c6d..a02668e55 100644
--- a/src/components/UConfirmationButton/UConfirmationButton.js
+++ b/src/components/UConfirmationButton/UConfirmationButton.js
@@ -28,12 +28,16 @@ const useStyles = makeStyles(theme => ({
 }))
 
 const CONTROL_VARIANTS = {
-  popup: 'popup',
   menuItem: 'menuItem',
   icon: 'icon',
   button: 'button',
 }
 
+const CONFIRMATION_VARIANTS = {
+  menu: 'menu',
+  popup: 'popup',
+}
+
 /**
  * UConfirmationButton is a component to get confirmation from the user before processing it.
  * This button displays the confirmation where user has clicked the button
@@ -52,13 +56,18 @@ export default function UConfirmationButton(props) {
     confirmActionText,
     cancelText,
     buttonVariant,
+    confirmationVariant,
   } = props
   const [deleteAnchorEl, setDeleteAnchorEl] = useState(null)
   const [openDialog, setOpenDialog] = useState(false)
 
   const handleConfirm = e => {
     onConfirm && onConfirm(e, id)
-    if (variant !== CONTROL_VARIANTS.popup) handleDeleteOptionClicked(e)
+    if (confirmationVariant === CONFIRMATION_VARIANTS.popup) {
+      setOpenDialog(false)
+    } else {
+      handleDeleteOptionClicked(e)
+    }
   }
 
   const handleDeleteOptionClicked = e => {
@@ -66,8 +75,11 @@ export default function UConfirmationButton(props) {
   }
 
   const handleClick = e => {
-    if (variant !== CONTROL_VARIANTS.popup) setDeleteAnchorEl(e.currentTarget)
-    else setOpenDialog(true)
+    if (confirmationVariant === CONFIRMATION_VARIANTS.popup) {
+      setOpenDialog(true)
+    } else {
+      setDeleteAnchorEl(e.currentTarget)
+    }
   }
 
   const handleCancelPopup = e => {
@@ -106,7 +118,7 @@ export default function UConfirmationButton(props) {
           </IconButton>
         </Tooltip>
       )}
-      {variant === CONTROL_VARIANTS.popup ? (
+      {confirmationVariant === CONFIRMATION_VARIANTS.popup ? (
         <Dialog id={`delete-confirmation-menu-${id}`} open={openDialog}>
           <DialogContent>
             <Typography variant="body1">{confirmText || ''}</Typography>
@@ -146,13 +158,17 @@ UConfirmationButton.propTypes = {
   buttonText: PropTypes.string,
   /** trigger confirmation function */
   onConfirm: PropTypes.func.isRequired,
-  /** variant: popup or menuItem or icon or button */
+  /** variant: menuItem or icon or button */
   variant: PropTypes.oneOf([
-    CONTROL_VARIANTS.popup,
     CONTROL_VARIANTS.menuItem,
     CONTROL_VARIANTS.icon,
     CONTROL_VARIANTS.button,
   ]),
+  /** Confirmation variant: popup or menu */
+  confirmationVariant: PropTypes.oneOf([
+    CONFIRMATION_VARIANTS.popup,
+    CONFIRMATION_VARIANTS.menu,
+  ]),
   /** if the variant is menuitem, this prop make sure the item enable or not */
   enabled: PropTypes.bool,
   /** button cancel text for popup variant */
@@ -176,4 +192,5 @@ UConfirmationButton.defaultProps = {
   cancelText: 'No',
   icon: <DeleteOutlinedIcon />,
   buttonVariant: 'text',
+  confirmationVariant: 'menu',
 }
diff --git a/src/components/UConfirmationButton/UConfirmationButton.md b/src/components/UConfirmationButton/UConfirmationButton.md
index dce0c8db1..4c0e41f43 100644
--- a/src/components/UConfirmationButton/UConfirmationButton.md
+++ b/src/components/UConfirmationButton/UConfirmationButton.md
@@ -6,87 +6,174 @@ import { Typography, Grid, Menu, MenuItem, Link, IconButton } from '@material-ui
 import LinkOffIcon from '@material-ui/icons/LinkOff'
 import MoreVertIcon from '@material-ui/icons/MoreVert'
 
-  const [anchorEl, setAnchorEl] = useState(null)
-
-  const open = Boolean(anchorEl)
-  const itemId = 1
+  const [anchorEl, setAnchorEl] = useState({ menu: null, popup: null })
+  const openMenuVariant = Boolean(anchorEl.menu)
+  const openPopupVariant = Boolean(anchorEl.popup)
   function handleDelete(event, id) {
     console.log(id)
   }
-  function handleClick(event) {
-    setAnchorEl(event.currentTarget)
+  function handleClick(event, type) {
+    setAnchorEl({
+      ...anchorEl,
+      [type]: event.currentTarget,
+    })
   }
-  function handleClose() {
-    setAnchorEl(null)
+  function handleClose(type) {
+    setAnchorEl({
+      ...anchorEl,
+      [type]: null,
+    })
   }
 
     <Grid container>
-      <Grid item xs={12} sm={4} md={3}>
-        <Typography variant="subtitle1">Icon variant</Typography>
-        <UConfirmationButton
-          onConfirm={handleDelete}
-          id={itemId}
-          buttonText="Delete"
-        />
+      <Grid item xs={12}>
+        <Typography variant="subtitle1">Confirmation popup variant</Typography>
       </Grid>
-      <Grid item xs={12} sm={4} md={3}>
-        <Typography variant="subtitle1">Menu item variant</Typography>
-        <IconButton
-          aria-label="more"
-          aria-controls="menu-item-variant"
-          aria-haspopup="true"
-          onClick={handleClick}
-        >
-          <MoreVertIcon />
-        </IconButton>
-        <Menu
-          id="menu-item-variant"
-          anchorEl={anchorEl}
-          keepMounted
-          open={open}
-          onClose={handleClose}
-          disableEnforceFocus={true}
-        >
-          <MenuItem onClick={handleClose}>
-            <Link href="#" underline="none">
-              Edit
-            </Link>
-          </MenuItem>
-          <MenuItem onClick={handleClose}>
-            <Link href="#" underline="none">
-              View
-            </Link>
-          </MenuItem>
+      <Grid container item xs={12}>
+        <Grid item xs={12} sm={6} md={3}>
+          <Typography variant="subtitle1">Icon</Typography>
+          <UConfirmationButton
+            confirmText="Are you sure you want to delete the item?"
+            onConfirm={handleDelete}
+            id={1}
+            buttonText="Delete"
+            confirmationVariant="popup"
+          />
+        </Grid>
+        <Grid item xs={12} sm={6} md={3}>
+          <Typography variant="subtitle1">Menu item</Typography>
+          <IconButton
+            aria-label="more"
+            aria-controls="menu-item-variant-confirm-popup"
+            aria-haspopup="true"
+            onClick={e => handleClick(e, 'popup')}
+          >
+            <MoreVertIcon />
+          </IconButton>
+          <Menu
+            id="menu-item-variant-confirm-popup"
+            anchorEl={anchorEl.popup}
+            keepMounted
+            open={openPopupVariant}
+            onClose={() => handleClose('popup')}
+            disableEnforceFocus={true}
+          >
+            <MenuItem onClick={() => handleClose('popup')}>
+              <Link href="#" underline="none">
+                Edit
+              </Link>
+            </MenuItem>
+            <MenuItem onClick={() => handleClose('popup')}>
+              <Link href="#" underline="none">
+                View
+              </Link>
+            </MenuItem>
+            <UConfirmationButton
+              onConfirm={handleDelete}
+              id={2}
+              confirmText="Are you sure you want to delete the item?"
+              buttonText="Delete"
+              variant="menuItem"
+              icon={null}
+              confirmationVariant="popup"
+            />
+          </Menu>
+        </Grid>
+        <Grid item xs={12} sm={6} md={3}>
+          <Typography variant="subtitle1">Button</Typography>
           <UConfirmationButton
             onConfirm={handleDelete}
-            id={itemId}
+            id={3}
+            confirmText="Are you sure you want to delete the item?"
             buttonText="Delete"
-            variant="menuItem"
-            icon={null}
+            variant="button"
+            confirmationVariant="popup"
           />
-        </Menu>
+        </Grid>
+        <Grid item xs={12} sm={6} md={3}>
+          <Typography variant="subtitle1">Custom icon</Typography>
+          <UConfirmationButton
+            onConfirm={handleDelete}
+            id={4}
+            buttonText="Unlink"
+            variant="button"
+            confirmText="Are you sure you want to unlink the item?"
+            confirmActionText="Yes, unlink"
+            confirmationVariant="popup"
+            icon={<LinkOffIcon />}
+          />
+        </Grid>
       </Grid>
-      <Grid item xs={12} sm={4} md={3}>
-        <Typography variant="subtitle1">Button variant</Typography>
-        <UConfirmationButton
-          onConfirm={handleDelete}
-          id={itemId}
-          buttonText="Delete"
-          variant="button"
-          icon={null}
-        />
+      <Grid item xs={12}>
+        <Typography variant="subtitle1">Confirmation menu variant</Typography>
       </Grid>
-      <Grid item xs={12} sm={4} md={3}>
-        <Typography variant="subtitle1">Custom icon and confirm text</Typography>
-        <UConfirmationButton
-          onConfirm={handleDelete}
-          id={itemId}
-          buttonText="Unlink"
-          variant="button"
-          confirmText='Confirm unlink?'
-          confirmActionText='Yes, unlink'
-          icon={<LinkOffIcon />}
-        />
+      <Grid container item xs={12}>
+        <Grid item xs={12} sm={6} md={3}>
+          <Typography variant="subtitle1">Icon</Typography>
+          <UConfirmationButton
+            onConfirm={handleDelete}
+            id={5}
+            buttonText="Delete"
+          />
+        </Grid>
+        <Grid item xs={12} sm={6} md={3}>
+          <Typography variant="subtitle1">Menu item</Typography>
+          <IconButton
+            aria-label="more"
+            aria-controls="menu-item-variant-confirm-menu"
+            aria-haspopup="true"
+            onClick={e => handleClick(e, 'menu')}
+          >
+            <MoreVertIcon />
+          </IconButton>
+          <Menu
+            id="menu-item-variant-confirm-menu"
+            anchorEl={anchorEl.menu}
+            keepMounted
+            open={openMenuVariant}
+            onClose={() => handleClose('menu')}
+            disableEnforceFocus={true}
+          >
+            <MenuItem onClick={() => handleClose('menu')}>
+              <Link href="#" underline="none">
+                Edit
+              </Link>
+            </MenuItem>
+            <MenuItem onClick={() => handleClose('menu')}>
+              <Link href="#" underline="none">
+                View
+              </Link>
+            </MenuItem>
+            <UConfirmationButton
+              onConfirm={handleDelete}
+              id={6}
+              buttonText="Delete"
+              variant="menuItem"
+              icon={null}
+            />
+          </Menu>
+        </Grid>
+        <Grid item xs={12} sm={6} md={3}>
+          <Typography variant="subtitle1">Button</Typography>
+          <UConfirmationButton
+            onConfirm={handleDelete}
+            id={7}
+            buttonText="Delete"
+            variant="button"
+          />
+        </Grid>
+        <Grid item xs={12} sm={6} md={3}>
+          <Typography variant="subtitle1">Custom icon</Typography>
+          <UConfirmationButton
+            onConfirm={handleDelete}
+            id={8}
+            buttonText="Unlink"
+            variant="button"
+            confirmText="Confirm unlink?"
+            confirmActionText="Yes, unlink"
+            icon={<LinkOffIcon />}
+          />
+        </Grid>
       </Grid>
     </Grid>
   

From 63a93a0c216fc152104a39be0253fd72ffa20aa3 Mon Sep 17 00:00:00 2001
From: "vinu.ganesan" <vinu.ganesan@swordgroup.in>
Date: Thu, 21 Dec 2023 12:02:41 +0530
Subject: [PATCH 5/5] Prop name updated

---
 .../src/components/UConfirmationButtonExample.js   | 12 ++++++------
 .../UConfirmationButton/UConfirmationButton.js     | 14 +++++++-------
 .../UConfirmationButton/UConfirmationButton.md     | 12 ++++++------
 3 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/example/src/components/UConfirmationButtonExample.js b/example/src/components/UConfirmationButtonExample.js
index cd8b82dc6..0bc95930b 100644
--- a/example/src/components/UConfirmationButtonExample.js
+++ b/example/src/components/UConfirmationButtonExample.js
@@ -40,7 +40,7 @@ export default function UConfirmationButtonExample() {
         </Typography>
       </Grid>
       <Grid item xs={12}>
-        <Typography variant="subtitle1">Confirmation popup variant</Typography>
+        <Typography variant="subtitle1">Confirm popup variant</Typography>
       </Grid>
       <Grid container item xs={12}>
         <Grid item xs={12} sm={6} md={3}>
@@ -50,7 +50,7 @@ export default function UConfirmationButtonExample() {
             onConfirm={handleDelete}
             id={1}
             buttonText="Delete"
-            confirmationVariant="popup"
+            confirmVariant="popup"
           />
         </Grid>
         <Grid item xs={12} sm={6} md={3}>
@@ -88,7 +88,7 @@ export default function UConfirmationButtonExample() {
               buttonText="Delete"
               variant="menuItem"
               icon={null}
-              confirmationVariant="popup"
+              confirmVariant="popup"
             />
           </Menu>
         </Grid>
@@ -100,7 +100,7 @@ export default function UConfirmationButtonExample() {
             confirmText="Are you sure you want to delete the item?"
             buttonText="Delete"
             variant="button"
-            confirmationVariant="popup"
+            confirmVariant="popup"
           />
         </Grid>
         <Grid item xs={12} sm={6} md={3}>
@@ -112,13 +112,13 @@ export default function UConfirmationButtonExample() {
             variant="button"
             confirmText="Are you sure you want to unlink the item?"
             confirmActionText="Yes, unlink"
-            confirmationVariant="popup"
+            confirmVariant="popup"
             icon={<LinkOffIcon />}
           />
         </Grid>
       </Grid>
       <Grid item xs={12}>
-        <Typography variant="subtitle1">Confirmation menu variant</Typography>
+        <Typography variant="subtitle1">Confirm menu variant</Typography>
       </Grid>
       <Grid container item xs={12}>
         <Grid item xs={12} sm={6} md={3}>
diff --git a/src/components/UConfirmationButton/UConfirmationButton.js b/src/components/UConfirmationButton/UConfirmationButton.js
index a02668e55..b2be22f57 100644
--- a/src/components/UConfirmationButton/UConfirmationButton.js
+++ b/src/components/UConfirmationButton/UConfirmationButton.js
@@ -56,14 +56,14 @@ export default function UConfirmationButton(props) {
     confirmActionText,
     cancelText,
     buttonVariant,
-    confirmationVariant,
+    confirmVariant,
   } = props
   const [deleteAnchorEl, setDeleteAnchorEl] = useState(null)
   const [openDialog, setOpenDialog] = useState(false)
 
   const handleConfirm = e => {
     onConfirm && onConfirm(e, id)
-    if (confirmationVariant === CONFIRMATION_VARIANTS.popup) {
+    if (confirmVariant === CONFIRMATION_VARIANTS.popup) {
       setOpenDialog(false)
     } else {
       handleDeleteOptionClicked(e)
@@ -75,7 +75,7 @@ export default function UConfirmationButton(props) {
   }
 
   const handleClick = e => {
-    if (confirmationVariant === CONFIRMATION_VARIANTS.popup) {
+    if (confirmVariant === CONFIRMATION_VARIANTS.popup) {
       setOpenDialog(true)
     } else {
       setDeleteAnchorEl(e.currentTarget)
@@ -118,7 +118,7 @@ export default function UConfirmationButton(props) {
           </IconButton>
         </Tooltip>
       )}
-      {confirmationVariant === CONFIRMATION_VARIANTS.popup ? (
+      {confirmVariant === CONFIRMATION_VARIANTS.popup ? (
         <Dialog id={`delete-confirmation-menu-${id}`} open={openDialog}>
           <DialogContent>
             <Typography variant="body1">{confirmText || ''}</Typography>
@@ -164,8 +164,8 @@ UConfirmationButton.propTypes = {
     CONTROL_VARIANTS.icon,
     CONTROL_VARIANTS.button,
   ]),
-  /** Confirmation variant: popup or menu */
-  confirmationVariant: PropTypes.oneOf([
+  /** Confirm variant: popup or menu */
+  confirmVariant: PropTypes.oneOf([
     CONFIRMATION_VARIANTS.popup,
     CONFIRMATION_VARIANTS.menu,
   ]),
@@ -192,5 +192,5 @@ UConfirmationButton.defaultProps = {
   cancelText: 'No',
   icon: <DeleteOutlinedIcon />,
   buttonVariant: 'text',
-  confirmationVariant: 'menu',
+  confirmVariant: 'menu',
 }
diff --git a/src/components/UConfirmationButton/UConfirmationButton.md b/src/components/UConfirmationButton/UConfirmationButton.md
index 4c0e41f43..018a7a284 100644
--- a/src/components/UConfirmationButton/UConfirmationButton.md
+++ b/src/components/UConfirmationButton/UConfirmationButton.md
@@ -27,7 +27,7 @@ import MoreVertIcon from '@material-ui/icons/MoreVert'
 
     <Grid container>
       <Grid item xs={12}>
-        <Typography variant="subtitle1">Confirmation popup variant</Typography>
+        <Typography variant="subtitle1">Confirm popup variant</Typography>
       </Grid>
       <Grid container item xs={12}>
         <Grid item xs={12} sm={6} md={3}>
@@ -37,7 +37,7 @@ import MoreVertIcon from '@material-ui/icons/MoreVert'
             onConfirm={handleDelete}
             id={1}
             buttonText="Delete"
-            confirmationVariant="popup"
+            confirmVariant="popup"
           />
         </Grid>
         <Grid item xs={12} sm={6} md={3}>
@@ -75,7 +75,7 @@ import MoreVertIcon from '@material-ui/icons/MoreVert'
               buttonText="Delete"
               variant="menuItem"
               icon={null}
-              confirmationVariant="popup"
+              confirmVariant="popup"
             />
           </Menu>
         </Grid>
@@ -87,7 +87,7 @@ import MoreVertIcon from '@material-ui/icons/MoreVert'
             confirmText="Are you sure you want to delete the item?"
             buttonText="Delete"
             variant="button"
-            confirmationVariant="popup"
+            confirmVariant="popup"
           />
         </Grid>
         <Grid item xs={12} sm={6} md={3}>
@@ -99,13 +99,13 @@ import MoreVertIcon from '@material-ui/icons/MoreVert'
             variant="button"
             confirmText="Are you sure you want to unlink the item?"
             confirmActionText="Yes, unlink"
-            confirmationVariant="popup"
+            confirmVariant="popup"
             icon={<LinkOffIcon />}
           />
         </Grid>
       </Grid>
       <Grid item xs={12}>
-        <Typography variant="subtitle1">Confirmation menu variant</Typography>
+        <Typography variant="subtitle1">Confirm menu variant</Typography>
       </Grid>
       <Grid container item xs={12}>
         <Grid item xs={12} sm={6} md={3}>