nitro-web 0.0.111 → 0.0.112

package/components/partials/element/dropdown.tsx

@@ -11,7 +11,14 @@ type DropdownProps = {
   css?: string
   /** The direction of the menu **/
   dir?: 'bottom-left'|'bottom-right'|'top-left'|'top-right'
-  options?: { label: string|React.ReactNode, onClick?: Function, isSelected?: boolean, icon?: React.ReactNode, className?: string }[]
+  options?: { 
+    label: string|React.ReactNode,
+    onClick?: Function,
+    isSelected?: boolean,
+    icon?: React.ReactNode,
+    iconLeft?: React.ReactNode,
+    className?: string 
+  }[]
   /** Whether the dropdown is hoverable **/
   isHoverable?: boolean
   /** The content to render inside the top of the dropdown **/
@@ -22,6 +29,7 @@ type DropdownProps = {
   menuToggles?: boolean
   /** The minimum width of the menu **/
   minWidth?: number | string
+  maxHeight?: number | string
   toggleCallback?: (isActive: boolean) => void
 }
 
@@ -39,6 +47,7 @@ export const Dropdown = forwardRef(function Dropdown({
   menuIsOpen, 
   menuToggles=true,
   minWidth,
+  maxHeight,
   toggleCallback,
 }: DropdownProps, ref) {
   // https://letsbuildui.dev/articles/building-a-dropdown-menu-component-with-react-hooks
@@ -156,7 +165,11 @@ export const Dropdown = forwardRef(function Dropdown({
         })
       }
       <ul
-        style={{ minWidth }}
+        style={{ 
+          minWidth: minWidth, 
+          maxHeight: maxHeight, 
+          ...(maxHeight ? { overflow: 'auto' } : {}),
+        }}
         class={
           twMerge(`${menuStyle} ${ready ? 'is-ready' : ''} absolute invisible opacity-0 select-none min-w-full z-[1] ${menuClassName||''}`)}
       >
@@ -170,6 +183,7 @@ export const Dropdown = forwardRef(function Dropdown({
                 className={twMerge(`${optionStyle} ${option.className} ${menuOptionClassName}`)}
                 onClick={(e: React.MouseEvent) => onClick(option, e)}
               >
+                { !!option.iconLeft && option.iconLeft }
                 <span class="flex-auto">{option.label}</span>
                 { !!option.icon && option.icon }
                 { option.isSelected && <CheckCircleIcon className="size-[22px] text-primary -my-1 -mx-0.5" /> }

package/components/partials/element/table.tsx

@@ -124,7 +124,7 @@ export function Table<T extends TableRow>({
   return (
     <div 
       style={{ marginTop: -rowGap }}
-      className={twMerge('overflow-x-auto thin-scrollbar', className)}
+      className={twMerge('overflow-x-auto thin-scrollbar min-h-full', className)}
     >
       <div 
         style={{ borderSpacing: `0 ${rowGap}px` }}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nitro-web",
-  "version": "0.0.111",
+  "version": "0.0.112",
   "repository": "github:boycce/nitro-web",
   "homepage": "https://boycce.github.io/nitro-web/",
   "description": "Nitro is a battle-tested, modular base project to turbocharge your projects, styled using Tailwind 🚀",