nitro-web 0.0.113 → 0.0.114

package/components/partials/element/dropdown.tsx

@@ -17,6 +17,8 @@ type DropdownProps = {
     isSelected?: boolean,
     icon?: React.ReactNode,
     iconLeft?: React.ReactNode,
+    /** Prevent the dropdown from closing when the option is clicked */
+    preventCloseOnClick?: boolean,
     className?: string 
   }[]
   /** Whether the dropdown is hoverable **/
@@ -25,6 +27,7 @@ type DropdownProps = {
   menuContent?: React.ReactNode
   menuClassName?: string
   menuOptionClassName?: string
+  /** force open the menu */
   menuIsOpen?: boolean
   menuToggles?: boolean
   /** The minimum width of the menu **/
@@ -137,9 +140,9 @@ export const Dropdown = forwardRef(function Dropdown({
     if (!isHoverable && !menuIsOpen && ((menuToggles || e.key) || !isActive)) setIsActive(!isActive)
   }
 
-  function onClick(option: { onClick?: Function }, e: React.MouseEvent) {
+  function onClick(option: { onClick?: Function, preventCloseOnClick?: boolean }, e: React.MouseEvent) {
     if (option.onClick) option.onClick(e)
-    if (!menuIsOpen) setIsActive(!isActive)
+    if (!menuIsOpen && !option?.preventCloseOnClick) setIsActive(!isActive)
   }
 
   return (

package/components/partials/element/table.tsx

@@ -1,4 +1,4 @@
-import { JSX, useState, useCallback } from 'react'
+import { JSX, useState, useCallback, Fragment } from 'react'
 import { ChevronDownIcon, ChevronUpIcon } from 'lucide-react'
 import { Checkbox, queryObject, queryString, twMerge } from 'nitro-web'
 
@@ -142,7 +142,7 @@ export function Table<T extends TableRow>({
               const pl = sideColorPadding + (j == 0 ? columnPaddingX : columnGap)
               const pr = j == columns.length - 1 ? columnPaddingX : columnGap
 
-              if(col.isHidden) return <></>
+              if (col.isHidden) return <Fragment key={j} />
               return (
                 <div
                   key={j}
@@ -213,6 +213,7 @@ export function Table<T extends TableRow>({
             return (
               <div 
                 key={`${row._id}-${i}`}
+                id={`row-${row._id}-${i}`}
                 onClick={rowOnClick ? () => rowOnClick(row) : undefined}
                 className={twMerge(
                   `table-row relative ${rowOnClick ? 'cursor-pointer' : ''} ${isSelected ? 'is-selected' : ''}`, rowClassName
@@ -224,7 +225,7 @@ export function Table<T extends TableRow>({
                     const pl = j == 0 ? columnPaddingX : columnGap
                     const pr = j == columns.length - 1 ? columnPaddingX : columnGap
 
-                    if(col.isHidden) return <></>
+                    if (col.isHidden) return <Fragment key={j} />
                     return (
                       <div
                         key={j}

package/components/partials/form/field.tsx

@@ -7,7 +7,7 @@ import { Errors, type Error } from 'nitro-web/types'
 import { MailIcon, CalendarIcon, FunnelIcon, SearchIcon, EyeIcon, EyeOffIcon } from 'lucide-react'
 import { memo } from 'react'
 
-type FieldType = 'text' | 'password' | 'email' | 'filter' | 'search' | 'textarea' | 'currency' | 'date' | 'color'
+type FieldType = 'text' | 'number' | 'password' | 'email' | 'filter' | 'search' | 'textarea' | 'currency' | 'date' | 'color'
 type InputProps = React.InputHTMLAttributes<HTMLInputElement>
 type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>
 type FieldExtraProps = {
@@ -35,7 +35,7 @@ type IconWrapperProps = {
 }
 // Discriminated union (https://stackoverflow.com/a/77351290/1900648)
 export type FieldProps = (
-  | ({ type?: 'text' | 'password' | 'email' | 'filter' | 'search' } & InputProps & FieldExtraProps)
+  | ({ type?: 'text' | 'number' | 'password' | 'email' | 'filter' | 'search' } & InputProps & FieldExtraProps)
   | ({ type: 'textarea' } & TextareaProps & FieldExtraProps)
   | ({ type: 'currency' } & FieldCurrencyProps & FieldExtraProps)
   | ({ type: 'color' } & FieldColorProps & FieldExtraProps)
@@ -67,7 +67,7 @@ function FieldBase({ state, icon, iconPos: ip, errorTitle, ...props }: FieldProp
   
   // Input type
   const [inputType, setInputType] = useState(() => { // eslint-disable-line
-    return type == 'password' ? 'password' : (type == 'textarea' ? 'textarea' : 'text')
+    return type == 'password' ? 'password' : (type == 'textarea' ? 'textarea' : (type == 'number' ? 'number' : 'text'))
   })
   
   // Value: Input is always controlled if state is passed in
@@ -76,7 +76,7 @@ function FieldBase({ state, icon, iconPos: ip, errorTitle, ...props }: FieldProp
     const v = deepFind(state, props.name) as string | undefined
     value = v ?? ''
   }
-
+  
   // Icon
   if (type == 'password') {
     Icon = <IconWrapper 
@@ -104,7 +104,7 @@ function FieldBase({ state, icon, iconPos: ip, errorTitle, ...props }: FieldProp
   const commonProps = { id: id, value: value, className: inputClassName }
 
   // Type has to be referenced as props.type for TS to be happy
-  if (!type || type == 'text' || type == 'password' || type == 'email' || type == 'filter' || type == 'search') {
+  if (!type || type == 'text' || type == 'number' || type == 'password' || type == 'email' || type == 'filter' || type == 'search') {
     return (
       <FieldContainer error={error} className={props.className}>
         {Icon}<input {...props} {...commonProps} type={inputType} />

package/components/partials/styleguide.tsx

@@ -412,6 +412,10 @@ export function Styleguide({ className, elements, children, currencies }: Styleg
           </div>
           <Field name="password" type="password"/>
         </div>
+        <div>
+          <label for="search3number">Number</label>
+          <Field name="number" id="search3number" type="number" placeholder="Number..." />
+        </div>
         <div>
           <label for="search3">Search</label>
           <Field name="search" id="search3" type="search" placeholder="Search..." />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nitro-web",
-  "version": "0.0.113",
+  "version": "0.0.114",
   "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 🚀",