From 608c184c46f34215839cdfd33d922ee0951c9d31 Mon Sep 17 00:00:00 2001
From: "Irsyad A. Panjaitan" <irsyad@parsinta.com>
Date: Tue, 19 Nov 2024 21:23:21 +0700
Subject: [PATCH] make good example on context-menu

---
 .../docs/controls/context-menu/context-menu-danger-demo.tsx | 4 +++-
 components/docs/controls/context-menu/context-menu-demo.tsx | 4 +++-
 .../controls/context-menu/context-menu-disabled-demo.tsx    | 4 +++-
 .../context-menu/context-menu-item-details-demo.tsx         | 4 +++-
 .../controls/context-menu/context-menu-separator-demo.tsx   | 4 +++-
 .../controls/context-menu/context-menu-with-icon-demo.tsx   | 4 +++-
 components/docs/generated/previews.ts                       | 2 +-
 components/ui/context-menu.tsx                              | 6 +++---
 resources/content/docs/components/controls/context-menu.mdx | 2 +-
 9 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/components/docs/controls/context-menu/context-menu-danger-demo.tsx b/components/docs/controls/context-menu/context-menu-danger-demo.tsx
index 0d4fd5fe..4e55d32e 100644
--- a/components/docs/controls/context-menu/context-menu-danger-demo.tsx
+++ b/components/docs/controls/context-menu/context-menu-danger-demo.tsx
@@ -7,7 +7,9 @@ import { ContextMenu } from "ui"
 export default function ContextMenuDangerDemo() {
   return (
     <ContextMenu>
-      <ContextMenu.Trigger>Right click me</ContextMenu.Trigger>
+      <ContextMenu.Trigger className="h-28 w-56 border-2 border-dashed rounded-lg grid place-content-center">
+        Right click me
+      </ContextMenu.Trigger>
       <ContextMenu.Content>
         <ContextMenu.Item>Open</ContextMenu.Item>
         <ContextMenu.Item>Rename</ContextMenu.Item>
diff --git a/components/docs/controls/context-menu/context-menu-demo.tsx b/components/docs/controls/context-menu/context-menu-demo.tsx
index f4a7098c..3e4fbace 100644
--- a/components/docs/controls/context-menu/context-menu-demo.tsx
+++ b/components/docs/controls/context-menu/context-menu-demo.tsx
@@ -7,7 +7,9 @@ import { ContextMenu } from "ui"
 export default function ContextMenuDemo() {
   return (
     <ContextMenu>
-      <ContextMenu.Trigger>Right click me</ContextMenu.Trigger>
+      <ContextMenu.Trigger className="h-28 w-56 border-2 border-dashed rounded-lg grid place-content-center">
+        Right click me
+      </ContextMenu.Trigger>
       <ContextMenu.Content className="sm:min-w-56">
         <ContextMenu.Item>Back</ContextMenu.Item>
         <ContextMenu.Item isDisabled>Forward</ContextMenu.Item>
diff --git a/components/docs/controls/context-menu/context-menu-disabled-demo.tsx b/components/docs/controls/context-menu/context-menu-disabled-demo.tsx
index db2a0aef..c6868cd8 100644
--- a/components/docs/controls/context-menu/context-menu-disabled-demo.tsx
+++ b/components/docs/controls/context-menu/context-menu-disabled-demo.tsx
@@ -7,7 +7,9 @@ import { ContextMenu } from "ui"
 export default function ContextMenuDisabledDemo() {
   return (
     <ContextMenu>
-      <ContextMenu.Trigger>Right click me</ContextMenu.Trigger>
+      <ContextMenu.Trigger className="h-28 w-56 border-2 border-dashed rounded-lg grid place-content-center">
+        Right click me
+      </ContextMenu.Trigger>
       <ContextMenu.Content>
         <ContextMenu.Item id="view">View</ContextMenu.Item>
         <ContextMenu.Item id="edit">Edit</ContextMenu.Item>
diff --git a/components/docs/controls/context-menu/context-menu-item-details-demo.tsx b/components/docs/controls/context-menu/context-menu-item-details-demo.tsx
index 62b482c7..ef6b10cf 100644
--- a/components/docs/controls/context-menu/context-menu-item-details-demo.tsx
+++ b/components/docs/controls/context-menu/context-menu-item-details-demo.tsx
@@ -5,7 +5,9 @@ import { ContextMenu } from "ui"
 export default function ContextMenuItemDetailsDemo() {
   return (
     <ContextMenu>
-      <ContextMenu.Trigger>Right click me</ContextMenu.Trigger>
+      <ContextMenu.Trigger className="h-28 w-56 border-2 border-dashed rounded-lg grid place-content-center">
+        Right click me
+      </ContextMenu.Trigger>
       <ContextMenu.Content items={roles}>
         {(item) => (
           <ContextMenu.Item id={item.id} textValue={item.name}>
diff --git a/components/docs/controls/context-menu/context-menu-separator-demo.tsx b/components/docs/controls/context-menu/context-menu-separator-demo.tsx
index 6a5653e6..d3f35e71 100644
--- a/components/docs/controls/context-menu/context-menu-separator-demo.tsx
+++ b/components/docs/controls/context-menu/context-menu-separator-demo.tsx
@@ -7,7 +7,9 @@ import { ContextMenu } from "ui"
 export default function ContextMenuSeparatorDemo() {
   return (
     <ContextMenu>
-      <ContextMenu.Trigger>Right click me</ContextMenu.Trigger>
+      <ContextMenu.Trigger className="h-28 w-56 border-2 border-dashed rounded-lg grid place-content-center">
+        Right click me
+      </ContextMenu.Trigger>
       <ContextMenu.Content>
         <ContextMenu.Item id="view">View</ContextMenu.Item>
         <ContextMenu.Item id="edit">Edit</ContextMenu.Item>
diff --git a/components/docs/controls/context-menu/context-menu-with-icon-demo.tsx b/components/docs/controls/context-menu/context-menu-with-icon-demo.tsx
index 94dc7ee5..82c84773 100644
--- a/components/docs/controls/context-menu/context-menu-with-icon-demo.tsx
+++ b/components/docs/controls/context-menu/context-menu-with-icon-demo.tsx
@@ -8,7 +8,9 @@ import { ContextMenu } from "ui"
 export default function ContextMenuWithIconDemo() {
   return (
     <ContextMenu>
-      <ContextMenu.Trigger>Right click me</ContextMenu.Trigger>
+      <ContextMenu.Trigger className="h-28 w-56 border-2 border-dashed rounded-lg grid place-content-center">
+        Right click me
+      </ContextMenu.Trigger>
       <ContextMenu.Content>
         <ContextMenu.Item>
           <IconFolder />
diff --git a/components/docs/generated/previews.ts b/components/docs/generated/previews.ts
index 63c61fa5..3ab9fcc5 100644
--- a/components/docs/generated/previews.ts
+++ b/components/docs/generated/previews.ts
@@ -2,7 +2,7 @@
 // This file is autogenerated by scripts/create-pr-content.ts.
 // Do not edit this file directly.
 
-import React from 'react';
+import React from "react"
 
 export const previews: Record<string, any> = {
   "date-and-time/date-field/date-field-demo": {
diff --git a/components/ui/context-menu.tsx b/components/ui/context-menu.tsx
index 5cd57917..418b9494 100644
--- a/components/ui/context-menu.tsx
+++ b/components/ui/context-menu.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import React, { useRef, useState } from "react"
+import React from "react"
 
 import { tv } from "tailwind-variants"
 
@@ -33,11 +33,11 @@ interface ContextMenuRootComponent {
 }
 
 const ContextMenu = ({ children }: ContextMenuRootComponent) => {
-  const [contextMenuOffset, setContextMenuOffset] = useState<{
+  const [contextMenuOffset, setContextMenuOffset] = React.useState<{
     offset: number
     crossOffset: number
   } | null>(null)
-  const buttonRef = useRef<HTMLButtonElement>(null)
+  const buttonRef = React.useRef<HTMLButtonElement>(null)
 
   return (
     <ContextMenuTriggerContext.Provider
diff --git a/resources/content/docs/components/controls/context-menu.mdx b/resources/content/docs/components/controls/context-menu.mdx
index f16c73de..b96b8ea7 100644
--- a/resources/content/docs/components/controls/context-menu.mdx
+++ b/resources/content/docs/components/controls/context-menu.mdx
@@ -3,7 +3,7 @@ title: "Context Menu"
 description: Pops a menu right where you click or hold down long, perfect for a right-click or a solid long press. It's all about quick access and easy picks!
 order: 6
 published: true
-status: alpha
+status: beta
 ---
 
 ## Basic