nitro-web 0.0.131 → 0.0.133

package/client/index.ts

@@ -25,7 +25,7 @@ export { Accordion } from '../components/partials/element/accordion'
 export { Avatar } from '../components/partials/element/avatar'
 export { Button } from '../components/partials/element/button'
 export { Calendar, type CalendarProps } from '../components/partials/element/calendar'
-export { Dropdown, type DropdownProps } from '../components/partials/element/dropdown'
+export { Dropdown, type DropdownProps, type DropdownOption } from '../components/partials/element/dropdown'
 export { Filters, type FiltersHandleType, type FilterType } from '../components/partials/element/filters'
 export { GithubLink } from '../components/partials/element/github-link'
 export { Initials } from '../components/partials/element/initials'
@@ -47,7 +47,7 @@ export { FieldCurrency, type FieldCurrencyProps } from '../components/partials/f
 export { FieldDate, type FieldDateProps } from '../components/partials/form/field-date'
 export { FieldTime, type FieldTimeProps } from '../components/partials/form/field-time'
 export { Location } from '../components/partials/form/location'
-export { Select, getSelectStyle, type SelectProps } from '../components/partials/form/select'
+export { Select, getSelectStyle, type SelectProps, type SelectOption } from '../components/partials/form/select'
 
 // Component Other Components
 export { IsFirstRender } from '../components/partials/is-first-render'

package/components/partials/element/dropdown.tsx

@@ -3,6 +3,16 @@ import { forwardRef, cloneElement } from 'react'
 import { getSelectStyle, twMerge } from 'nitro-web'
 import { CheckCircleIcon } from '@heroicons/react/24/solid'
 
+export type DropdownOption = { 
+  label: string|React.ReactNode,
+  onClick?: Function,
+  isSelected?: boolean,
+  icon?: React.ReactNode,
+  iconLeft?: React.ReactNode,
+  /** Prevent the dropdown from closing when the option is clicked */
+  preventCloseOnClick?: boolean,
+  className?: string 
+}
 export type DropdownProps = {
   allowOverflow?: boolean
   animate?: boolean
@@ -11,16 +21,7 @@ export 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,
-    iconLeft?: React.ReactNode,
-    /** Prevent the dropdown from closing when the option is clicked */
-    preventCloseOnClick?: boolean,
-    className?: string 
-  }[]
+  options?: DropdownOption[]
   /** Whether the dropdown is hoverable **/
   isHoverable?: boolean
   /** The content to render inside the top of the dropdown **/

package/components/partials/form/select.tsx

@@ -20,7 +20,12 @@ type GetSelectStyle = {
   hasError?: boolean
   usePrefixes?: boolean
 }
-
+export type SelectOption = { 
+  value: unknown, 
+  label: string | React.ReactNode, 
+  fixed?: boolean, 
+  data?: { [key: string]: unknown } 
+}
 /** Select (all other props are passed to react-select) **/
 export type SelectProps = {
   /** field name or path on state (used to match errors), e.g. 'date', 'company.email' **/
@@ -35,8 +40,8 @@ export type SelectProps = {
   prefix?: string
   /** The onChange handler **/
   onChange?: (event: { target: { name: string, value: unknown } }) => void
-  /** The options to display in the dropdown **/
-  options: { value: unknown, label: string | React.ReactNode, fixed?: boolean, [key: string]: unknown }[]
+  /** The options to display in the dropdown, data is used to pass additional data to the option **/
+  options: SelectOption[]
   /** The state object to get the value and check errors from **/
   state?: { errors?: Errors, [key: string]: any } // was unknown|unknown[]
   /** Select variations **/

package/package.json

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