Add support for readOnly to disable Menu button (#63)

* Add support for readOnly to disable Menu button

* fix: remove unnecessary async keyword from test

* fix: remove explicitly defined true boolean for readOnly prop to satisfy linter

---------

Co-authored-by: christopherafbjur <chrisdevcabc@gmail.com>

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} />

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', () => {
+    const { getByText } = render(
+      <Menu onClick={mockOnClick} selected={null} readOnly />
+    );
+    expect(getByText('Add icon').closest('button')).toBeDisabled();
+  });
 });

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"