feat(ui): add disabled prop to the popper item. disable all interacti…

…on with disabled item
ZeynalliZeynal · Jan 21, 2025 · c5aef98 · c5aef98
1 parent f4914b6
commit c5aef98
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 9 deletions.
diff --git a/app/(geist)/geist/dropdown-menu/_sections/dropdown-menu-default.tsx b/app/(geist)/geist/dropdown-menu/_sections/dropdown-menu-default.tsx
@@ -22,7 +22,7 @@ export default function DropdownMenuDefault() {
             >
               One
             </PopperItem>
-            <PopperItem>Two</PopperItem>
+            <PopperItem disabled>Two</PopperItem>
             <PopperItem>One</PopperItem>
             <PopperItem>Two</PopperItem>
             <PopperItem>One</PopperItem>

diff --git a/components/ui/primitives/popper/popper-content.tsx b/components/ui/primitives/popper/popper-content.tsx
@@ -165,6 +165,8 @@ export function PopperContent(props: PopperContentProps) {
             }}
           >
             <div
+              data-align={align}
+              data-side={side}
               tabIndex={-1}
               data-state={isOpen ? 'open' : 'closed'}
               data-popper-content=""

diff --git a/components/ui/primitives/popper/popper-item.tsx b/components/ui/primitives/popper/popper-item.tsx
@@ -1,11 +1,11 @@
 'use client';
 
-import { PopperItemProps } from '@/types/ui/popper';
 import { usePopper } from '@/components/ui/primitives/popper/popper-context';
 import { chain } from '@/utils/chain';
 import { cn } from '@/utils/lib';
 import React from 'react';
 import { mergeRefs } from '@/utils/ui/merge-refs';
+import { PopperItemProps } from '@/components/ui/primitives/popper/popper.types';
 
 export const PopperItem = React.forwardRef<HTMLDivElement, PopperItemProps>(
   (props, forwardRef) => {
@@ -17,11 +17,13 @@ export const PopperItem = React.forwardRef<HTMLDivElement, PopperItemProps>(
       onMouseEnter,
       onMouseLeave,
       onKeyDown,
+      disabled,
       ...etc
     } = props;
     const { closePopper, highlightedItem, highlight } = usePopper();
 
     function handleMouseEnter(event: React.MouseEvent<HTMLDivElement>) {
+      if (disabled) return;
       event.stopPropagation();
       event.currentTarget.tabIndex = 0;
       highlight(event.currentTarget);
@@ -44,15 +46,20 @@ export const PopperItem = React.forwardRef<HTMLDivElement, PopperItemProps>(
         tabIndex={-1}
         data-popper-item=""
         role="menuitem"
+        data-disabled={disabled ? '' : null}
         data-highlighted={highlightedItem === ref.current ? '' : null}
         className={cn(
-          'flex items-center rounded-lg px-3 h-9 align-middle transition cursor-default focus:bg-gray-alpha-100 outline-none',
+          'flex items-center rounded-lg px-3 h-9 align-middle transition cursor-default focus:bg-gray-alpha-100 outline-none data-[disabled]:text-gray-500 data-[disabled]:pointer-events-none data-[disabled]:focus:bg-transparent',
           className,
         )}
-        onClick={chain(onClick, closePopper)}
-        onMouseEnter={chain(handleMouseEnter, onMouseEnter)}
-        onMouseLeave={chain(handleMouseLeave, onMouseLeave)}
-        onKeyDown={chain(handleKeyDown, onKeyDown)}
+        onClick={!disabled ? chain(onClick, closePopper) : undefined}
+        onMouseEnter={
+          !disabled ? chain(handleMouseEnter, onMouseEnter) : undefined
+        }
+        onMouseLeave={
+          !disabled ? chain(handleMouseLeave, onMouseLeave) : undefined
+        }
+        onKeyDown={!disabled ? chain(handleKeyDown, onKeyDown) : undefined}
         {...etc}
       >
         {children}

diff --git a/components/ui/primitives/popper/popper.types.ts b/components/ui/primitives/popper/popper.types.ts
@@ -29,5 +29,5 @@ export interface PopperContentProps extends ComponentProps<'div'> {
 }
 
 export interface PopperItemProps extends ComponentProps<'div'> {
-  children: React.ReactNode;
+  disabled?: boolean;
 }
diff --git a/components/ui/primitives/selectors.ts b/components/ui/primitives/selectors.ts
@@ -1,2 +1,2 @@
 export const POPPER_CONTENT_SELECTOR = '[data-popper-content]';
-export const POPPER_ITEM_SELECTOR = '[data-popper-item]';
+export const POPPER_ITEM_SELECTOR = '[data-popper-item]:not([data-disabled])';