[FX-5974] Fix disabled state when compact and collapsible (#4568)

.changeset/curly-mails-admire.md

@@ -0,0 +1,8 @@
+---
+'@toptal/picasso-dropdown': minor
+'@toptal/picasso': minor
+---
+
+### Dropdown
+
+- support disabled state

.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

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>

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

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'>