From ebe62a18a7e2fae0ef890de75244c6bacbbb43e8 Mon Sep 17 00:00:00 2001
From: TomasSlama <tomas.slama@toptal.com>
Date: Thu, 19 Sep 2024 09:40:55 +0200
Subject: [PATCH] [FX-5974] Fix disabled state when compact and collapsible

---
 .changeset/curly-mails-admire.md                       |  8 ++++++++
 .changeset/four-drinks-wonder.md                       |  8 ++++++++
 packages/base/Dropdown/src/Dropdown/Dropdown.tsx       | 10 ++++++++--
 .../base/Page/src/SidebarItem/SidebarItemCompact.tsx   |  3 ++-
 .../src/SidebarItem/story/WithBadgeAndTag.example.tsx  |  1 +
 5 files changed, 27 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/curly-mails-admire.md
 create mode 100644 .changeset/four-drinks-wonder.md

diff --git a/.changeset/curly-mails-admire.md b/.changeset/curly-mails-admire.md
new file mode 100644
index 0000000000..e7679a3437
--- /dev/null
+++ b/.changeset/curly-mails-admire.md
@@ -0,0 +1,8 @@
+---
+'@toptal/picasso-dropdown': minor
+'@toptal/picasso': minor
+---
+
+### Dropdown
+
+- support disabled state
diff --git a/.changeset/four-drinks-wonder.md b/.changeset/four-drinks-wonder.md
new file mode 100644
index 0000000000..c205b7e43a
--- /dev/null
+++ b/.changeset/four-drinks-wonder.md
@@ -0,0 +1,8 @@
+---
+'@toptal/picasso-page': patch
+'@toptal/picasso': patch
+---
+
+### PageSidebar
+
+- fix disabled state for collapsible compact sidebar item
diff --git a/packages/base/Dropdown/src/Dropdown/Dropdown.tsx b/packages/base/Dropdown/src/Dropdown/Dropdown.tsx
index abbe53ef7d..952036d0fc 100644
--- a/packages/base/Dropdown/src/Dropdown/Dropdown.tsx
+++ b/packages/base/Dropdown/src/Dropdown/Dropdown.tsx
@@ -37,6 +37,8 @@ interface InternalProps
   content: ReactNode
   /** The placement of the content element relative to anchor element. */
   placement?: PopperPlacementType
+  /** Disabled */
+  disabled?: boolean
   /** Disable auto focus of first item in list or item */
   disableAutoFocus?: boolean
   /** Disable close on generic close events */
@@ -131,6 +133,7 @@ export const Dropdown: DropdownProps = forwardRef<
     content,
     offset,
     placement,
+    disabled,
     disableAutoClose,
     disableAutoFocus,
     disablePortal,
@@ -258,8 +261,11 @@ export const Dropdown: DropdownProps = forwardRef<
       style={style}
     >
       <div
-        className='inline-flex items-center cursor-pointer'
-        onClick={handleAnchorClick}
+        className={twJoin(
+          'inline-flex items-center',
+          disabled ? 'pointer-events-none' : 'cursor-pointer'
+        )}
+        onClick={disabled ? () => {} : handleAnchorClick}
       >
         {typeof children === 'function' ? children({ isOpen }) : children}
       </div>
diff --git a/packages/base/Page/src/SidebarItem/SidebarItemCompact.tsx b/packages/base/Page/src/SidebarItem/SidebarItemCompact.tsx
index e4ea8e59a8..968bc5525a 100644
--- a/packages/base/Page/src/SidebarItem/SidebarItemCompact.tsx
+++ b/packages/base/Page/src/SidebarItem/SidebarItemCompact.tsx
@@ -17,7 +17,7 @@ const useStyles = makeStyles<Theme>(styles, {
 
 export const SidebarItemCompact = forwardRef<HTMLElement, Props>(
   function CompactSidebarItem(props: Props, ref) {
-    const { menu, index, compact, icon } = props
+    const { menu, index, compact, icon, disabled } = props
     const [isOpened, handleOpen, handleClose] = useOpen()
     const classes = useStyles()
 
@@ -35,6 +35,7 @@ export const SidebarItemCompact = forwardRef<HTMLElement, Props>(
         <Container left='small' right='small'>
           <Dropdown
             classes={{ popper: classes.compactDropdown }}
+            disabled={disabled}
             placement='right-start'
             content={subMenu}
             keepMounted
diff --git a/packages/base/Page/src/SidebarItem/story/WithBadgeAndTag.example.tsx b/packages/base/Page/src/SidebarItem/story/WithBadgeAndTag.example.tsx
index 97e574b4fa..693908aafd 100644
--- a/packages/base/Page/src/SidebarItem/story/WithBadgeAndTag.example.tsx
+++ b/packages/base/Page/src/SidebarItem/story/WithBadgeAndTag.example.tsx
@@ -51,6 +51,7 @@ const Menu = () => (
     <Page.Sidebar.Item
       collapsible
       icon={<AddDocument16 />}
+      disabled
       menu={
         <Page.Sidebar.Menu>
           <Page.Sidebar.Item badge={5} tag='New'>