From 0f3514c8a7b299ad22215b1ed3b15c6f0e50522b Mon Sep 17 00:00:00 2001
From: Luiz Perez <luiz@outsetagency.ie>
Date: Fri, 22 Dec 2023 20:05:06 +0000
Subject: [PATCH 1/3] Add support for readOnly to disable Menu button

---
 src/components/IconPicker.tsx | 13 +++++++++++--
 src/components/Menu.test.tsx  |  7 +++++++
 src/components/Menu.tsx       |  4 ++++
 3 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/components/IconPicker.tsx b/src/components/IconPicker.tsx
index e427e86..2801c3e 100644
--- a/src/components/IconPicker.tsx
+++ b/src/components/IconPicker.tsx
@@ -19,7 +19,12 @@ import type { SearchResultsOnSelectCallback } from './SearchResults';
 import type { IconObject, IconPickerOptions } from '../types';
 import type { ObjectInputProps } from 'sanity';
 
-const IconPicker = ({ schemaType, value = {}, onChange }: ObjectInputProps) => {
+const IconPicker = ({
+  schemaType,
+  value = {},
+  readOnly,
+  onChange,
+}: ObjectInputProps) => {
   const options: IconPickerOptions = schemaType.options;
   const [isPopupOpen, setIsPopupOpen] = useState(false);
   const { query, loading, results, setQuery } = useQuery(options);
@@ -88,7 +93,11 @@ const IconPicker = ({ schemaType, value = {}, onChange }: ObjectInputProps) => {
         <IconContext.Provider
           value={{ style: { width: ICON_WIDTH, height: ICON_HEIGHT } }}
         >
-          <Menu onClick={handleMenuClick} selected={selected} />
+          <Menu
+            onClick={handleMenuClick}
+            selected={selected}
+            readOnly={readOnly}
+          />
 
           <Popup onClose={closePopup} isOpen={isPopupOpen}>
             <SearchBar value={query} onChange={onQueryChange} />
diff --git a/src/components/Menu.test.tsx b/src/components/Menu.test.tsx
index 565b94a..6d2d68e 100644
--- a/src/components/Menu.test.tsx
+++ b/src/components/Menu.test.tsx
@@ -57,4 +57,11 @@ describe('Menu', () => {
     await user.click(getByText('Delete'));
     expect(mockOnClick).toHaveBeenCalledWith(Action.delete);
   });
+
+  it('renders disabled state when readOnly is true', async () => {
+    const { getByText } = render(
+      <Menu onClick={mockOnClick} selected={null} readOnly={true} />
+    );
+    expect(getByText('Add icon').closest('button')).toBeDisabled();
+  });
 });
diff --git a/src/components/Menu.tsx b/src/components/Menu.tsx
index 8c3fede..d4a2e28 100644
--- a/src/components/Menu.tsx
+++ b/src/components/Menu.tsx
@@ -14,14 +14,17 @@ export type MenuClickCallback = (action: Action) => void | Error;
 const Menu = ({
   onClick,
   selected,
+  readOnly,
 }: {
   onClick: MenuClickCallback;
   selected: IconObject | null;
+  readOnly?: boolean | undefined;
 }) => {
   return (
     <>
       {!selected && (
         <Button
+          disabled={readOnly}
           icon={AddIcon}
           fontSize={[1, 1, 2]}
           mode="ghost"
@@ -35,6 +38,7 @@ const Menu = ({
         <MenuButton
           button={
             <Button
+              disabled={readOnly}
               mode="ghost"
               padding={[2, 2, 3]}
               tone="default"

From 6e69a176682522f80d1b6623cc405dc8e811ec16 Mon Sep 17 00:00:00 2001
From: christopherafbjur <chrisdevcabc@gmail.com>
Date: Wed, 17 Jan 2024 20:16:22 +0100
Subject: [PATCH 2/3] fix: remove unnecessary async keyword from test

---
 src/components/Menu.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Menu.test.tsx b/src/components/Menu.test.tsx
index 6d2d68e..fe8278a 100644
--- a/src/components/Menu.test.tsx
+++ b/src/components/Menu.test.tsx
@@ -58,7 +58,7 @@ describe('Menu', () => {
     expect(mockOnClick).toHaveBeenCalledWith(Action.delete);
   });
 
-  it('renders disabled state when readOnly is true', async () => {
+  it('renders disabled state when readOnly is true', () => {
     const { getByText } = render(
       <Menu onClick={mockOnClick} selected={null} readOnly={true} />
     );

From 0f5effe31d6d02c30c16bb986b6348a762a77639 Mon Sep 17 00:00:00 2001
From: christopherafbjur <chrisdevcabc@gmail.com>
Date: Wed, 17 Jan 2024 20:17:11 +0100
Subject: [PATCH 3/3] fix: remove explicitly defined true boolean for readOnly
 prop to satisfy linter

---
 src/components/Menu.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Menu.test.tsx b/src/components/Menu.test.tsx
index fe8278a..3174c92 100644
--- a/src/components/Menu.test.tsx
+++ b/src/components/Menu.test.tsx
@@ -60,7 +60,7 @@ describe('Menu', () => {
 
   it('renders disabled state when readOnly is true', () => {
     const { getByText } = render(
-      <Menu onClick={mockOnClick} selected={null} readOnly={true} />
+      <Menu onClick={mockOnClick} selected={null} readOnly />
     );
     expect(getByText('Add icon').closest('button')).toBeDisabled();
   });