ui/combobox and listadaptor: support for disabled list items (#115)

* primitives/Combobox and ListAdaptor: disabled={adaptor.isDisabled(el)} * version bump
hanzoai · Dec 29, 2024 · 9ed36dc · 9ed36dc
1 parent 15b8da6
commit 9ed36dc
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 4 deletions.
diff --git a/pkg/ui/package.json b/pkg/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/ui",
-  "version": "4.2.4",
+  "version": "4.2.5",
   "description": "Library that contains shared UI primitives, support for a common design system, and other boilerplate support.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",

diff --git a/pkg/ui/primitives/combobox.tsx b/pkg/ui/primitives/combobox.tsx
@@ -97,6 +97,7 @@ const Combobox = <T, P extends ComboboxTriggerProps<T>>({
   popoverClx='',
   listItemClx='',
   listItemSelectedClx='',
+  listItemDisabledClx='',
   noCheckmark=false,
   listItemImageClx='',
   searchPlaceholder='Search...',
@@ -117,6 +118,7 @@ const Combobox = <T, P extends ComboboxTriggerProps<T>>({
   popoverClx?: string
   listItemClx?: string
   listItemSelectedClx?: string
+  listItemDisabledClx?: string
   listItemImageClx?: string
   listItemImageSize?: number
   noCheckmark?: boolean
@@ -192,11 +194,13 @@ const Combobox = <T, P extends ComboboxTriggerProps<T>>({
                 key={adaptor.getValue(el)}
                 value={adaptor.getValue(el)}
                 onSelect={handleSelect}
+                disabled={adaptor.isDisabled ? adaptor.isDisabled(el) : false}
                 className={cn(
                   'flex', 
                   noCheckmark ? 'justify-start' : 'justify-between', 
                   listItemClx, 
-                  (isCurrent(el) ? listItemSelectedClx : '')
+                  (isCurrent(el) ? listItemSelectedClx : ''),
+                  ((adaptor.isDisabled && adaptor.isDisabled(el)) ? listItemDisabledClx : '')
                 )}
               >
                 <div className='flex justify-start items-center gap-2'>

diff --git a/pkg/ui/primitives/command.tsx b/pkg/ui/primitives/command.tsx
@@ -118,8 +118,8 @@ const CommandItem = React.forwardRef<
     ref={ref}
     className={cn(
       'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none',
-      'aria-selected:bg-level-3 aria-selected:text-accent',
-      'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'data-selected:bg-level-3 aria-selected:text-accent',
+      'data-[disabled]:pointer-events-none data-[disabled]:opacity-35',
       className
     )}
     {...props}

diff --git a/pkg/ui/primitives/list-adaptor.ts b/pkg/ui/primitives/list-adaptor.ts
@@ -4,6 +4,7 @@ interface ListAdaptor<T> {
   valueEquals: (el: T, v: string) => boolean
   getLabel?:  (el: T) => string 
   getImageUrl?:  (el: T) => string | null
+  isDisabled?: (el: T) => boolean
 }
 
 export {

diff --git a/pkg/ui/tailwind/tailwind.config.hanzo-preset.js b/pkg/ui/tailwind/tailwind.config.hanzo-preset.js
@@ -648,12 +648,17 @@ export default {
       20: '0.2',
       25: '0.25',
       30: '0.3',
+      35: '0.35',
       40: '0.4',
+      45: '0.45',
       50: '0.5',
+      55: '0.55',
       60: '0.6',
+      65: '0.65',
       70: '0.7',
       75: '0.75',
       80: '0.8',
+      85: '0.85',
       90: '0.9',
       95: '0.95',
       100: '1',