nitro-web 0.0.145 → 0.0.146

package/client/index.ts

@@ -26,12 +26,13 @@ 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, type DropdownOption } from '../components/partials/element/dropdown'
-export { Filters, type FiltersHandleType, type FilterType } from '../components/partials/element/filters'
+export { Filters, type FiltersHandleType, type FilterType, usePushChangesToPath } from '../components/partials/element/filters'
 export { GithubLink } from '../components/partials/element/github-link'
 export { Initials } from '../components/partials/element/initials'
 export { Message } from '../components/partials/element/message'
 export { Modal } from '../components/partials/element/modal'
 export { Sidebar, type SidebarProps } from '../components/partials/element/sidebar'
+export { TimePicker, type TimePickerProps } from '../components/partials/element/timepicker'
 export { Tooltip } from '../components/partials/element/tooltip'
 export { Topbar } from '../components/partials/element/topbar'
 export { Table, type TableColumn, type TableProps, type TableRow, type TableRowType } from '../components/partials/element/table'
@@ -42,10 +43,9 @@ export { Drop } from '../components/partials/form/drop'
 export { DropHandler } from '../components/partials/form/drop-handler'
 export { FormError } from '../components/partials/form/form-error'
 export { Field, isFieldCached, type FieldProps } from '../components/partials/form/field'
-export { FieldColor, type FieldColorProps } from '../components/partials/form/field-color'
-export { FieldCurrency, type FieldCurrencyProps } from '../components/partials/form/field-currency'
-export { FieldDate, type FieldDateProps } from '../components/partials/form/field-date'
-export { FieldTime, type FieldTimeProps } from '../components/partials/form/field-time'
+export { type FieldColorProps } from '../components/partials/form/field-color'
+export { type FieldCurrencyProps } from '../components/partials/form/field-currency'
+export { type FieldDateProps } from '../components/partials/form/field-date'
 export { Location } from '../components/partials/form/location'
 export { Select, getSelectStyle, type SelectProps, type SelectOption } from '../components/partials/form/select'
 

package/components/partials/element/calendar.tsx

@@ -1,79 +1,100 @@
-import { DayPicker, getDefaultClassNames, DayPickerProps as DayPickerPropsBase } from 'react-day-picker'
+import { DayPicker, getDefaultClassNames, DayPickerProps as DayPickerPropsBase, TZDate } from 'react-day-picker'
 import { isValid } from 'date-fns'
 import 'react-day-picker/style.css'
 import { IsFirstRender } from 'nitro-web'
 
 export const dayButtonClassName = 'size-[33px] text-sm'
 
+type Timestamp = null | number
+type TimestampArray = null | Timestamp[]
 type Mode = 'single'|'multiple'|'range'
-type ModeSelection<T extends Mode> = (
+type DayPickerSelection<T extends Mode> = (
   T extends 'single' ? Date | undefined
   : T extends 'multiple' ? Date[]
   : { from?: Date; to?: Date }
 )
+
 export type DayPickerProps = Omit<DayPickerPropsBase, 
   'mode' | 'selected' | 'onSelect' | 'modifiersClassNames' | 'classNames' | 'numberOfMonths'  | 'month' | 'onMonthChange'>
 
-export type CalendarProps = DayPickerProps & {
-  mode?: Mode
-  onChange?: (value: null|number|(null|number)[]) => void
-  value?: null|number|string|(null|number|string)[]
+type PreCalendarProps = DayPickerProps & {
   numberOfMonths?: number
-  month?: number // the value may be updated from an outside source, thus the month may have changed
+  /** month to display in the calendar (the value may be updated from an outside source, thus the month may have changed) */
+  month?: number 
   className?: string
-  preserveTime?: boolean // just for single mode
+  /** single mode only: preserve the time of the original date if needed */
+  preserveTime?: boolean 
+  /** timezone to display and set the dates in for the calendar (output always a timestamp) */
+  tz?: string 
+}
+
+// Discriminated union types based on mode
+type CalendarPropsSingle = PreCalendarProps & {
+  mode: 'single'
+  onChange?: (value: Timestamp) => void
+  value?: Timestamp // gracefully handles falsey values
 }
 
-export function Calendar({ mode='single', onChange, value, numberOfMonths, month: monthProp, className, preserveTime, 
-  ...props }: CalendarProps) {
+type CalendarPropsMultiple = PreCalendarProps & {
+  mode: 'multiple' | 'range'
+  onChange?: (value: TimestampArray) => void
+  value?: TimestampArray // gracefully handles falsey values
+}
+
+export type CalendarProps = CalendarPropsSingle | CalendarPropsMultiple
+
+export function Calendar({ value, numberOfMonths, month: monthProp, className, preserveTime, tz, ...props }: CalendarProps) {
   const isFirstRender = IsFirstRender()
-  const isRange = mode == 'range'
+  const isRange = props.mode == 'range'
 
-  // 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) : undefined) ////change to null
+  // Convert the value to an array of valid dates
+  const internalValue = useMemo(() => {
+    const _dates = value ? (Array.isArray(value) ? value : [value]) : []
+    return _dates.map(date => date && isValid(date) ? new TZDate(date, tz) : undefined)// DayPicker uses undefined (allgood, we output null)
   }, [value])
 
   // Hold the month in state to control the calendar when the input changes
-  const [month, setMonth] = useState(dates[0])
+  const [month, setMonth] = useState(internalValue[0] as Date)
 
   // Update the month if its changed from an outside source
   useEffect(() => {
-    if (!isFirstRender && monthProp) setMonth(new Date(monthProp))
+    if (!isFirstRender && monthProp) setMonth(new TZDate(monthProp, tz))
   }, [monthProp])
 
-  function handleDayPickerSelect<T extends Mode>(newDate: ModeSelection<T>) {
-    switch (mode as T) {
+  function handleDayPickerSelect(value: DayPickerSelection<CalendarProps['mode']>) {
+    switch (props.mode) {
       case 'single': {
-        const date = newDate as ModeSelection<'single'>
-        preserveTimeFn(date)
-        onChange?.(date?.getTime() ?? null)
+        const date = preserveTimeFn(value as DayPickerSelection<'single'>)
+        props.onChange?.(date ? date.getTime() : null)
         break
       }
       case 'range': {
-        const { from, to } = (newDate ?? {}) as ModeSelection<'range'>
-        onChange?.(from ? [from.getTime() || null, to?.getTime() || null] : null)
+        const { from, to } = (value ?? {}) as DayPickerSelection<'range'>
+        props.onChange?.(from ? [from.getTime() || null, to?.getTime() || null] : null)
         break
       }
       case 'multiple': {
-        const dates = (newDate as ModeSelection<'multiple'>)?.filter(Boolean) ?? []
-        onChange?.(dates.map((d) => d.getTime()))
+        const dates = (value as DayPickerSelection<'multiple'>)?.filter(Boolean)
+        props.onChange?.(dates.length ? dates.map((d) => d.getTime()) : null)
         break
       }
     }
   }
 
-  function preserveTimeFn(date?: Date) {      
-    // Preserve time from the original date if needed
-    if (preserveTime && dates[0] && date) {
-      const originalDate = dates[0]
-      date.setHours(
-        originalDate.getHours(),
-        originalDate.getMinutes(),
-        originalDate.getSeconds(),
-        originalDate.getMilliseconds()
+  function preserveTimeFn(newDate?: Date) {      
+    // Preserve time from the original date if needed. Since internalValue[0] is a TZDate object, we need to make sure the 
+    // new date is also a TZDate object in the same timezone.
+    if (newDate && preserveTime && internalValue[0]) {
+      const tzDate = new TZDate(newDate, tz)
+      tzDate.setHours(
+        internalValue[0].getHours(),
+        internalValue[0].getMinutes(),
+        internalValue[0].getSeconds(),
+        internalValue[0].getMilliseconds()
       )
+      return tzDate
+    } else {
+      return newDate
     }
   }
   
@@ -83,6 +104,7 @@ export function Calendar({ mode='single', onChange, value, numberOfMonths, month
     onMonthChange: setMonth,
     onSelect: handleDayPickerSelect,
     numberOfMonths: numberOfMonths || (isRange ? 2 : 1),
+    timeZone: tz,
     modifiersClassNames: {
       // Add a class without _, TW seems to replace this with a space in the css definition, e.g. &:not(.range middle)
       range_middle: `${d.range_middle} rangemiddle`,
@@ -115,12 +137,13 @@ export function Calendar({ mode='single', onChange, value, numberOfMonths, month
   return (
     <div>
       {
-        mode === 'single' ? (
-          <DayPicker  {...props} {...common} mode="single" selected={dates[0]} className={className} />
-        ) : mode === 'range' ? (
-          <DayPicker {...props} {...common} mode="range" selected={{ from: dates[0], to: dates[1] }} className={className} />
+        props.mode === 'single' ? (
+          <DayPicker  {...props} {...common} mode="single" selected={internalValue[0]} className={className} />
+        ) : props.mode === 'range' ? (
+          <DayPicker {...props} {...common} mode="range" selected={{ from: internalValue[0], to: internalValue[1] }} 
+            className={className} />
         ) : (
-          <DayPicker {...props} {...common} mode="multiple" selected={dates.filter((d) => !!d)} className={className} />
+          <DayPicker {...props} {...common} mode="multiple" selected={internalValue.filter((d) => !!d)} className={className} />
         )
       }
     </div>

package/components/partials/element/filters.tsx

@@ -1,4 +1,5 @@
-import { forwardRef, Dispatch, SetStateAction, useRef, useEffect, useImperativeHandle } from 'react'
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Dispatch, SetStateAction, useRef, useEffect, useLayoutEffect } from 'react'
 import { Button, Dropdown, Field, Select, type FieldProps, type SelectProps } from 'nitro-web'
 import { camelCaseToTitle, debounce, omit, queryString, queryObject, twMerge } from 'nitro-web/util'
 import { ListFilterIcon } from 'lucide-react'
@@ -14,10 +15,11 @@ export type FilterType = (
 )
 
 type FilterState = {
-  [key: string]: string|true|(string|true)[] // aka queryObject
+  [key: string]: unknown
 }
 
 type FiltersProps = {
+  /** State passed to the component, values must be processed, i.e. real numbers for dates, etc. */
   state?: FilterState
   setState?: Dispatch<SetStateAction<FilterState>>
   filters?: FilterType[]
@@ -41,26 +43,23 @@ export type FiltersHandleType = {
 
 const debounceTime = 250
 
-export const Filters = forwardRef<FiltersHandleType, FiltersProps>(({ 
+export function Filters({ 
   filters, 
   setState: setStateProp,
-  state: stateProp,
+  state: stateProp, // state passed
   buttonProps,
   buttonCounterClassName,
   buttonText, 
   dropdownProps, 
   dropdownFiltersClassName,
   elements,
-}, ref) => {
+}: FiltersProps) {
   const location = useLocation()
-  const navigate = useNavigate()
   const [lastUpdated, setLastUpdated] = useState(0)
-  const [debouncedSubmit] = useState(() => debounce(submit, debounceTime))
-  const [stateDefault, setStateDefault] = useState(() => ({ ...queryObject(location.search) }))
+  const [stateDefault, setStateDefault] = useState<FilterState>(() => processState({ ...queryObject(location.search) }, filters))
   const [state, setState] = [stateProp || stateDefault, setStateProp || setStateDefault]
-  const stateRef = useRef(state)
-  const locationRef = useRef(location)
   const count = useMemo(() => Object.keys(state).filter((k) => state[k] && filters?.some((f) => f.name === k)).length, [state, filters])
+  const pushChangesToPath = usePushChangesToPath(state)
 
   const Elements = {
     Button: elements?.Button || Button,
@@ -69,29 +68,11 @@ export const Filters = forwardRef<FiltersHandleType, FiltersProps>(({
     Select: elements?.Select || Select,
     FilterIcon: elements?.FilterIcon || ListFilterIcon,
   }
-
-  useImperativeHandle(ref, () => ({
-    submit: debouncedSubmit,
-  }))
-  
-  useEffect(() => {
-    return () => debouncedSubmit.cancel()
-  }, [])
   
-  useEffect(() => {
-    stateRef.current = state
-  }, [state])
-  
-  useEffect(() => {
-    locationRef.current = location
-  }, [location])
-
-  useEffect(() => {
-    // Only update the state if the filters haven't been input changed in the last 500ms
+  useLayoutEffect(() => {
+    // Only update the state if the filters haven't been input changed in the last 500ms (calls initially since lastUpdated is 0)
     if (Date.now() - lastUpdated > (debounceTime + 250)) {
-      setState(() => ({
-        ...queryObject(location.search),
-      }))
+      setState(() => processState({ ...queryObject(location.search) }, filters))
     }
   }, [location.search])
 
@@ -110,21 +91,15 @@ export const Filters = forwardRef<FiltersHandleType, FiltersProps>(({
   async function onInputChange(e: {target: {name: string, value: unknown}}) {
     // console.log('onInputChange', e.target.name, e.target.value)
     // the state is flattened for the query string, so here we se full paths as the key names e.g. 'job.location': '10')
-    setState((s) => ({ ...s, [e.target.name]: e.target.value as string })) 
+    setState((s) => ({ ...s, [e.target.name]: e.target.value as unknown })) 
     onAfterChange()
   }
 
   function onAfterChange() {
     setLastUpdated(Date.now())
-    debouncedSubmit()
+    pushChangesToPath()
   }
 
-  // Update the URL by replacing the current entry in the history stack
-  function submit(includePagination?: boolean) {
-    const queryStr = queryString(omit(stateRef.current, includePagination ? [] : ['page']))
-    navigate(locationRef.current.pathname + queryStr, { replace: true })
-  }
-  
   function getBasisWidth(width: 'full' | 'half' | 'third' | 'quarter' | 'fifth') {
     // Need to splay out the classnames for tailwind to work
     if (width == 'full') return 'w-full'
@@ -134,6 +109,40 @@ export const Filters = forwardRef<FiltersHandleType, FiltersProps>(({
     else if (width == 'fifth') return 'shrink basis-[calc(20%-8px)]'
   }
 
+  function processState(state: FilterState, filters: FilterType[]|undefined) {
+    // Since queryObject returns a string|true|(string|true)[], we need to parse the values to the correct type for the Fields/Selects
+    const output: FilterState = {...state}
+    for (const filter of filters || []) {
+      const name = filter.name
+      // Undefined values
+      if (typeof state[name] === 'undefined') {
+        output[name] = undefined
+      
+      // Date single needs to be null|string
+      } else if (filter.type === 'date' && (filter.mode === 'single' || filter.mode === 'time')) {
+        output[name] = parseDateValue(state[name], name)
+
+      } else if (filter.type === 'date' && (filter.mode === 'range' || filter.mode === 'multiple')) {
+        if (!state[name]) state[name] = undefined
+        else if (!Array.isArray(state[name])) console.error(`The "${name}" filter expected an array, received:`, state[name])
+        else output[name] = state[name].map((v, i) => parseDateValue(v, name + '.' + i))
+
+      // Remaining filters should accept text values
+      } else {
+        output[filter.name] = state[filter.name] + ''
+      }
+    }
+    return output
+  }
+
+  function parseDateValue(input: unknown, name: string) {
+    const number = parseFloat(input + '')
+    if (typeof input === 'undefined') return undefined
+    else if (input === null) return null
+    if (isNaN(number)) console.error(`The "${name}" filter expected a number, received:`, input)
+    else return number
+  }
+
   return (
     <Elements.Dropdown 
       // menuIsOpen={true}
@@ -153,35 +162,26 @@ export const Filters = forwardRef<FiltersHandleType, FiltersProps>(({
           </div> */}
           <div class={twMerge(`flex flex-wrap gap-[16px] p-[16px] pb-6 ${dropdownFiltersClassName || ''}`)}>
             {
-              filters?.map(({label, width='full', rowClassName, ...filter}, i) => (
-                <div key={i} class={twMerge(getBasisWidth(width), rowClassName || '')}>
-                  <div class="flex justify-between"> 
-                    <label for={filter.id || filter.name}>{label || camelCaseToTitle(filter.name)}</label>
-                    <a href="#" class="label font-normal text-secondary underline" onClick={(e) => reset(e, filter)}>Reset</a>
+              filters?.map(({label, width='full', rowClassName, ...filter}, i) => {
+                // `filter.name` is a full path e.g. 'job.location', not just the key `location`
+                const common = { className: '!mb-0', onChange: onInputChange  }
+                return (
+                  <div key={i} class={twMerge(getBasisWidth(width), rowClassName || '')}>
+                    <div class="flex justify-between"> 
+                      <label for={filter.id || filter.name}>{label || camelCaseToTitle(filter.name)}</label>
+                      <a href="#" class="label font-normal text-secondary underline" onClick={(e) => reset(e, filter)}>Reset</a>
+                    </div>
+                    {
+                      // Note: ignore typings for field, it has been sanitised in processState()
+                      filter.type === 'select' 
+                        ? <Elements.Select {...filter} {...common} value={state[filter.name] ?? ''} type={undefined} />
+                        : filter.type === 'date' 
+                          ? <Elements.Field {...filter} {...common} value={state[filter.name] as null ?? null} /> 
+                          : <Elements.Field {...filter} {...common} value={state[filter.name] as string ?? ''} />
+                    }
                   </div>
-                  {
-                    filter.type === 'select' && 
-                    <Elements.Select
-                      {...filter}
-                      class="!mb-0"
-                      // `filter.name` is a full path e.g. 'job.location', not just the key `location`
-                      value={typeof state[filter.name] === 'undefined' ? '' : state[filter.name]} 
-                      onChange={onInputChange}
-                      type={undefined}
-                    />
-                  }
-                  {
-                    filter.type !== 'select' && 
-                    <Elements.Field
-                      {...filter}
-                      class="!mb-0"
-                      // `filter.name` is a full path e.g. 'job.location', not just the key `location`
-                      value={typeof state[filter.name] === 'undefined' ? '' : state[filter.name] as string} 
-                      onChange={onInputChange}
-                    />
-                  }
-                </div>
-              ))
+                )
+              })
             }
           </div>
         </div>
@@ -207,6 +207,35 @@ export const Filters = forwardRef<FiltersHandleType, FiltersProps>(({
       </Elements.Button>
     </Elements.Dropdown>
   )
-})
+}
 
-Filters.displayName = 'Filters'
+Filters.displayName = 'Filters'
+
+export function usePushChangesToPath(state: { [key: string]: unknown }) {
+  // Return a debounced function which updates the query path using the state
+  const navigate = useNavigate()
+  const location = useLocation()
+  const [debouncedPush] = useState(() => debounce(push, debounceTime))
+  const stateRef = useRef(state)
+  const locationRef = useRef(location)
+
+  useEffect(() => {
+    locationRef.current = location
+  }, [location])
+
+  useEffect(() => {
+    return () => debouncedPush.cancel()
+  }, [])
+
+  useEffect(() => {
+    stateRef.current = state
+  }, [state])
+
+  // Update the URL by replacing the current entry in the history stack
+  function push(includePagination?: boolean) {
+    const queryStr = queryString(omit(stateRef.current, includePagination ? [] : ['page']))
+    navigate(locationRef.current.pathname + queryStr, { replace: true })
+  }
+
+  return debouncedPush
+}

package/components/partials/element/timepicker.tsx

@@ -0,0 +1,119 @@
+import { isValid, format } from 'date-fns'
+import { TZDate } from '@date-fns/tz'
+import { twMerge } from 'nitro-web'
+import { dayButtonClassName } from '../element/calendar'
+
+type Timestamp = null | number
+export type TimePickerProps = {
+  className?: string
+  onChange?: (value: Timestamp) => void
+  tz?: string
+  value?: Timestamp
+}
+
+export function TimePicker({ value, onChange, className, tz }: TimePickerProps) {
+  const refs = {
+    hour: useRef<HTMLDivElement>(null),
+    minute: useRef<HTMLDivElement>(null),
+    period: useRef<HTMLDivElement>(null),
+  }
+  const lists = [
+    [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], // hours
+    [
+      0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 
+      27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 
+      51, 52, 53, 54, 55, 56, 57, 58, 59,
+    ], // minutes
+    ['AM', 'PM'], // AM/PM
+  ]
+
+  // Convert the value to an valid* date
+  const internalValue = useMemo(() => {
+    return value && isValid(value) ? new TZDate(value, tz) : undefined
+  }, [value])
+  
+  // Get current values from date or use defaults
+  const hour = useMemo(() => internalValue ? parseInt(format(internalValue, 'h')) : undefined, [internalValue])
+  const minute = useMemo(() => internalValue ? parseInt(format(internalValue, 'm')) : undefined, [internalValue])
+  const period = useMemo(() => internalValue ? format(internalValue, 'a') : undefined, [internalValue])
+
+  // Scroll into view when the date changes
+  useEffect(() => {
+    if (hour !== undefined) scrollIntoView('hour', hour)
+    if (minute !== undefined) scrollIntoView('minute', minute)
+    if (period) scrollIntoView('period', period)
+  }, [hour, minute, period])
+  
+  const handleTimeChange = (type: 'hour' | 'minute' | 'period', value: string | number) => {
+    // use original internValue or new TZDate, make sure to use the same timezone to base it from
+    const _internalValue = internalValue ?? new TZDate(new Date(), tz)
+    const isPm = format(_internalValue, 'a') === 'PM'
+    if (type === 'hour') {
+      const newHour = value === 12 ? 0 : value as number
+      _internalValue.setHours(newHour + (isPm ? 12 : 0))
+    } else if (type === 'minute') {
+      _internalValue.setMinutes(value as number)
+    } else if (type === 'period') {
+      const newHours = _internalValue.getHours() + (isPm && value === 'AM' ? -12 : !isPm && value === 'PM' ? 12 : 0)
+      _internalValue.setHours(newHours)
+    }
+    
+    onChange?.(_internalValue.getTime())  
+  }
+
+  function scrollIntoView (type: 'hour' | 'minute' | 'period', value: string | number) {
+    const container = refs[type].current
+    if (!container) return
+    const element = container.querySelector(`[data-val="${value}"]`) as HTMLElement
+    if (!element) return
+  
+    const target =
+      element.offsetTop
+      - (container.clientHeight / 2)
+      + (element.clientHeight / 2)
+
+    container.scrollTo({ top: target, behavior: 'smooth' })
+  }
+
+  return (
+    <div className={twMerge('flex justify-center min-h-[250px]', className)}>
+      {
+        lists.map((list, i) => {
+          const type = i === 0 ? 'hour' : i === 1 ? 'minute' : 'period'
+          const currentValue = i === 0 ? hour : i === 1 ? minute : period
+          return (
+            <div 
+              key={i}
+              ref={refs[type]}
+              className="w-[60px] relative overflow-hidden hover:overflow-y-auto border-l border-gray-100 sm-scrollbar first:border-l-0"
+            >
+              <div className="w-[60px] absolute flex flex-col items-center py-2">
+                {/* using absolute since the scrollbar takes up space  */}
+                {list.map(item => (
+                  <div 
+                    className="py-[1px] flex group cursor-pointer"
+                    data-val={item}
+                    key={item}
+                    onClick={(_e) => {
+                      handleTimeChange(type, item)
+                    }}
+                  >
+                    <button 
+                      key={item}
+                      className={
+                        `${dayButtonClassName} rounded-full flex justify-center items-center group-hover:bg-gray-100 `
+                        + (item === currentValue ? '!bg-input-border-focus text-white' : '')
+                      }
+                    >
+                      {item.toString().padStart(2, '0').toLowerCase()}
+                    </button>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )
+        })
+      }
+    </div>
+  )
+}

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

@@ -1,31 +1,34 @@
 import { hsvaToHex, hexToHsva, validHex, HsvaColor } from '@uiw/color-convert'
 import Saturation from '@uiw/react-color-saturation'
 import Hue from '@uiw/react-color-hue'
-import { Dropdown, util } from 'nitro-web'
+import { currency, Dropdown, util } from 'nitro-web'
 
-export type FieldColorProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'|'value'> & {
+export type FieldColorProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'defaultValue'> & {
   name: string
   /** name is applied if id is not provided */
   id?: string 
-  defaultColor?: string
   Icon?: React.ReactNode
   onChange?: (event: { target: { name: string, value: string } }) => void
-  value?: string
+  value?: string // e.g. '#333'
+  defaultValue?: string // e.g. '#333'
 }
 
-export function FieldColor({ defaultColor='#333', Icon, onChange: onChangeProp, value: valueProp, ...props }: FieldColorProps) {
-  const [lastChanged, setLastChanged] = useState(() => `ic-${Date.now()}`)
+export function FieldColor({ defaultValue='#000', Icon, onChange: onChangeProp, ...props }: FieldColorProps) {
   const isInvalid = props.className?.includes('is-invalid') ? 'is-invalid' : ''
   const id = props.id || props.name
 
-  // Since value and onChange are optional, we need to hold the value in state if not provided
-  const [internalValue, setInternalValue] = useState(valueProp ?? defaultColor)
-  const value = valueProp ?? internalValue
-  const onChange = onChangeProp ?? ((e: { target: { name: string, value: string } }) => setInternalValue(e.target.value))
+  // Since value and onChange are optional, we need need to create an internal value state
+  const [internalValue, setInternalValue] = useState<FieldColorProps['value']>(props.value ?? defaultValue)
+  const inputValue = internalValue
 
-  function onInputChange(e: { target: { name: string, value: string } }) {
-    setLastChanged(`ic-${Date.now()}`)
-    onChange(e)
+  // Update the internal value when the value changes outside of the component
+  useEffect(() => {
+    if (internalValue !== (props.value ?? defaultValue)) setInternalValue(props.value ?? defaultValue)
+  }, [props.value])
+
+  function onChange(e: { target: { name: string, value: string } }) {
+    if (onChangeProp) onChangeProp({ target: { name: props.name, value: e.target.value }})
+    else setInternalValue(e.target.value)
   }
 
   return (
@@ -33,7 +36,7 @@ export function FieldColor({ defaultColor='#333', Icon, onChange: onChangeProp,
       dir="bottom-left"
       menuToggles={false}
       menuContent={
-        <ColorPicker key={lastChanged} defaultColor={defaultColor} name={props.name} value={value} onChange={onChange} />
+        <ColorPicker defaultValue={defaultValue} name={props.name} value={internalValue} onChange={onChange} />
       }
     >
       <div className="grid grid-cols-1">
@@ -42,9 +45,9 @@ export function FieldColor({ defaultColor='#333', Icon, onChange: onChangeProp,
           {...props}
           className={(props.className || '') + ' ' + isInvalid}
           id={id}
-          value={value}
-          onChange={onInputChange}
-          onBlur={() => !validHex(value||'') && onInputChange({ target: { name: props.name, value: '' }})}
+          value={inputValue}
+          onChange={onChange}
+          onBlur={() => !validHex(internalValue||'') && onChange({ target: { name: props.name, value: '' }})} // wipe if invalid
           autoComplete="off"
           type="text"
         />
@@ -53,10 +56,15 @@ export function FieldColor({ defaultColor='#333', Icon, onChange: onChangeProp,
   )
 }
 
-function ColorPicker({ name='', onChange, value='', defaultColor='' }: FieldColorProps) {
-  const [hsva, setHsva] = useState(() => hexToHsva(validHex(value) ? value : defaultColor))
+function ColorPicker({ name='', onChange, value='', defaultValue='' }: FieldColorProps) {
+  const [hsva, setHsva] = useState(() => hexToHsva(validHex(value) ? value : defaultValue))
   const [debounce] = useState(() => util.throttle(callOnChange, 50))
 
+  // Update the hsva when the internal value changes
+  useEffect(() => {
+    if (validHex(value)) setHsva(hexToHsva(value))
+  }, [value])
+
   function callOnChange(newHsva: HsvaColor) {
     if (onChange) onChange({ target: { name: name, value: hsvaToHex(newHsva) }})
   }