nitro-web 0.0.66 → 0.0.68

package/components/partials/element/dropdown.tsx

@@ -1,9 +1,10 @@
 import { css } from 'twin.macro'
 import { forwardRef, cloneElement } from 'react'
-import { getSelectStyle } from 'nitro-web'
+import { getSelectStyle, twMerge } from 'nitro-web'
 import { CheckCircleIcon } from '@heroicons/react/24/solid'
 
 type DropdownProps = {
+  allowOverflow?: boolean
   animate?: boolean
   children?: React.ReactNode
   className?: string
@@ -18,20 +19,23 @@ type DropdownProps = {
   /** The content to render inside the top of the dropdown **/
   menuContent?: React.ReactNode
   menuClassName?: string
+  menuOptionClassName?: string
   menuIsOpen?: boolean
   menuToggles?: boolean
   toggleCallback?: (isActive: boolean) => void
 }
 
 export const Dropdown = forwardRef(function Dropdown({
+  allowOverflow=false,
   animate=true,
   children, 
   className,
   dir, 
   options, 
   isHoverable,
-  minWidth, 
+  minWidth, // remove in favour of menuClassName
   menuClassName,
+  menuOptionClassName,
   menuContent, 
   menuIsOpen, 
   menuToggles=true,
@@ -92,6 +96,7 @@ export const Dropdown = forwardRef(function Dropdown({
         (isHoverable ? ' is-hoverable' : '') +
         (isActive ? ' is-active' : '') +
         (!animate ? ' no-animation' : '') +
+        (allowOverflow ? ' is-allowOverflow' : '') +
         ' nitro-dropdown' +
         (className ? ` ${className}` : '')
       }
@@ -108,7 +113,7 @@ export const Dropdown = forwardRef(function Dropdown({
       }
       <ul
         style={{ minWidth }}
-        class={`${menuStyle} absolute invisible opacity-0 select-none min-w-full z-[1] ${menuClassName}`}
+        class={twMerge(`${menuStyle} absolute invisible opacity-0 select-none min-w-full z-[1] ${menuClassName}`)}
       >
         {menuContent}
         {
@@ -117,7 +122,7 @@ export const Dropdown = forwardRef(function Dropdown({
             return (
               <li 
                 key={i} 
-                className={`${optionStyle} ${option.className}`}
+                className={twMerge(`${optionStyle} ${option.className} ${menuOptionClassName}`)}
                 onClick={(e: React.MouseEvent) => onClick(option, e)}
               >
                 <span class="flex-auto">{option.label}</span>
@@ -137,8 +142,7 @@ const style = css`
     transition: transform 0.15s ease, opacity 0.15s ease, visibility 0s 0.15s ease, max-width 0s 0.15s ease, max-height 0s 0.15s ease;
     max-width: 0; // handy if the dropdown ul exceeds the viewport width
     max-height: 0; // handy if the dropdown ul exceeds the viewport height
-    /* overflow: visible !important; // override menustyle  */
-    pointer-events: none; 
+    pointer-events: none;
   }
   &.is-bottom-right,
   &.is-top-right {
@@ -175,6 +179,8 @@ const style = css`
       max-width: 1000px;
       max-height: 1000px;
       pointer-events: auto;
+    }
+    &.is-allowOverflow > ul {
       overflow: visible;
     }
     &.is-bottom-left > ul,

package/components/partials/element/filters.tsx

@@ -27,12 +27,11 @@ type FiltersProps = {
     Select?: typeof Select
     FilterIcon?: typeof ListFilterIcon
   }
-  dropdownProps?: Partial<React.ComponentProps<typeof Dropdown>>
   buttonProps?: Partial<React.ComponentProps<typeof Button>>
-  buttonClassName?: string
   buttonText?: string
   buttonCounterClassName?: string
-  filtersContainerClassName?: string
+  dropdownProps?: Partial<React.ComponentProps<typeof Dropdown>>
+  dropdownFiltersClassName?: string
 }
 
 export type FiltersHandleType = {
@@ -45,13 +44,12 @@ export const Filters = forwardRef<FiltersHandleType, FiltersProps>(({
   filters, 
   setState: setState2,
   state: state2,
-  buttonClassName, 
+  buttonProps,
   buttonCounterClassName,
-  buttonProps, 
   buttonText, 
   dropdownProps, 
-  elements, 
-  filtersContainerClassName,
+  dropdownFiltersClassName,
+  elements,
 }, ref) => {
   const location = useLocation()
   const navigate = useNavigate()
@@ -119,19 +117,24 @@ export const Filters = forwardRef<FiltersHandleType, FiltersProps>(({
     navigate(location.pathname + queryStr, { replace: true })
   }
   
-  // if (!filters) return null
   return (
     <Elements.Dropdown 
       dir="bottom-right"
+      allowOverflow={true}
       // menuIsOpen={true}
-      menuClassName="!rounded-lg"
+      {...dropdownProps}
+      menuClassName={twMerge(`!rounded-lg min-w-[330px] ${dropdownProps?.menuClassName || ''}`)}
       menuContent={
-        <div class="w-[330px]">
+        <div>
           <div class="flex justify-between items-center border-b p-4 py-3.5">
             <div class="text-lg font-semibold">Filters</div>
             <Button color="clear" size="sm" onClick={resetAll}>Reset All</Button>
           </div>
-          <div class={twMerge(`flex flex-wrap gap-4 px-4 py-4 pb-6 ${filtersContainerClassName || ''}`)}>
+          {/* <div class="w-[1330px] bg-red-500 absolute">
+            This div shouldnt produce a page scrollbar when the dropdown is closed.
+            But should be visibile if allowedOverflow is true.
+          </div> */}
+          <div class={twMerge(`flex flex-wrap gap-4 px-4 py-4 pb-6 ${dropdownFiltersClassName || ''}`)}>
             {
               filters?.map(({label, rowClassName, ...filter}, i) => (
                 <div key={i} class={twMerge(`w-full ${rowClassName||''}`)}>
@@ -164,13 +167,12 @@ export const Filters = forwardRef<FiltersHandleType, FiltersProps>(({
           </div>
         </div>
       }
-      {...dropdownProps}
     >
       <Elements.Button 
         color="white" 
         IconLeft={<Elements.FilterIcon size={16} />} 
-        className={twMerge(`flex gap-x-2.5 ${buttonClassName || ''}`)}
         {...buttonProps}
+        className={twMerge(`flex gap-x-2.5 ${buttonProps?.className || ''}`)}
       >
         <span class="flex items-center gap-x-2.5">
           { buttonText || 'Filter By' }

package/components/partials/form/field-date.tsx

@@ -69,8 +69,11 @@ export function FieldDate({
     
   // Convert the value to an array of valid* dates
   const dates = useMemo(() => {
-    const _dates = Array.isArray(value) ? value : [value]
-    return _dates.map(date => isValid(date) ? new Date(date as number) : null) /// change to null
+    const arrOfNumbers = typeof value === 'string' 
+      ? value.split(/\s*,\s*/g).map(o => parseFloat(o)) 
+      : Array.isArray(value) ? value : [value]
+    const out = arrOfNumbers.map(date => isValid(date) ? new Date(date as number) : null) /// changed to null
+    return out
   }, [value])
 
   // Hold the input value in state
@@ -79,7 +82,7 @@ export function FieldDate({
   // Update the date's inputValue (text) when the value changes outside of the component
   useEffect(() => {
     if (new Date().getTime() > lastUpdated + 100) setInputValue(getInputValue(dates))
-  }, [value])
+  }, [dates])
 
   // Get the prefix content width
   useEffect(() => {
@@ -90,15 +93,10 @@ export function FieldDate({
     if (mode == 'single' && !showTime) dropdownRef.current?.setIsActive(false) // Close the dropdown
     setInputValue(getInputValue(value))
     // Update the value
-    onChange({ target: { name: props.name, value: value as any } })
+    onChange({ target: { name: props.name, value: getOutputValue(value) } })
     setLastUpdated(new Date().getTime())
   }
 
-  function getInputValue(dates: Date|number|null|(Date|number|null)[]) {
-    const _dates = Array.isArray(dates) ? dates : [dates]
-    return _dates.map(o => o ? format(o, localePattern) : '').join(mode == 'range' ? ' - ' : ', ')
-  }
-
   function onInputChange(e: React.ChangeEvent<HTMLInputElement>) {
     setInputValue(e.target.value) // keep the input value in sync
 
@@ -122,10 +120,20 @@ export function FieldDate({
     
     // Update the value
     const value = mode == 'single' ? split[0]?.getTime() ?? null : split.map(d => d?.getTime() ?? null)
-    onChange({ target: { name: props.name, value: value as any }})
+    onChange({ target: { name: props.name, value: getOutputValue(value) }})
     setLastUpdated(new Date().getTime())
   } 
 
+  function getInputValue(value: Date|number|null|(Date|number|null)[]) {
+    const _dates = Array.isArray(value) ? value : [value]
+    return _dates.map(o => o ? format(o, localePattern) : '').join(mode == 'range' ? ' - ' : ', ')
+  }
+
+  function getOutputValue(value: Date|number|null|(Date|number|null)[]): any {
+    // console.log(value)
+    return value
+  }
+
   return (
     <Dropdown
       ref={dropdownRef}
@@ -136,7 +144,8 @@ export function FieldDate({
       menuContent={
         <div className="flex">
           <Calendar 
-            {...{ mode, value, numberOfMonths, month }} 
+            // Calendar actually accepts an array of dates, but the type is not typed correctly
+            {...{ mode: mode, value: dates as any, numberOfMonths: numberOfMonths, month: month }} 
             preserveTime={!!showTime} 
             onChange={onCalendarChange} 
             className="pt-1 pb-2  px-3" 

package/package.json

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

package/util.js

@@ -1255,9 +1255,9 @@ export function parseFilters(query, config) {
     } else if (rule === 'dateRange') {
       const [start, end] = val.split(',').map(Number)
       if (isNaN(start) && isNaN(end)) throw new Error(`The "${key}" filter has an invalid value "${val}". Expected a date range.`)
-      else if (isNaN(start)) mongoQuery.date = { $gte: 0, $lte: end }
-      else if (isNaN(end)) mongoQuery.date = { $gte: start }
-      else mongoQuery.date = { $gte: start, $lte: end }
+      else if (isNaN(start)) mongoQuery[key] = { $gte: 0, $lte: end }
+      else if (isNaN(end)) mongoQuery[key] = { $gte: start }
+      else mongoQuery[key] = { $gte: start, $lte: end }
 
     } else {
       throw new Error(`Unknown filter type "${rule}" in the config.`)