nitro-web 0.0.145 → 0.0.147

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

@@ -15,128 +15,74 @@ type NumericFormatProps = React.InputHTMLAttributes<HTMLInputElement> & {
   prefix?: string;
 }
 
-export type FieldCurrencyProps = NumericFormatProps & {
+type Currencies = { [key: string]: { symbol: string, digits: number } }
+type Cents = string|number|null
+export type FieldCurrencyProps = Omit<NumericFormatProps, 'onChange' | 'value' | 'defaultValue'> & {
   name: string
   /** name is applied if id is not provided */
   id?: string
   /** currency iso, e.g. 'nzd' */
   currency: string
   /** override the default currencies array used to lookup currency symbol and digits, e.g. {nzd: { symbol: '$', digits: 2 }} */
-  currencies?: { [key: string]: { symbol: string, digits: number } }, 
+  currencies?: Currencies, 
   /** override the default CLDR country currency format, e.g. '¤#,##0.00' */
   format?: string, 
-  onChange?: (event: { target: { name: string, value: string|number|null } }) => void
+  onChange?: (event: { target: { name: string, value: Cents } }) => void
   /** value should be in cents */
-  value?: string|number|null
-  defaultValue?: number | string | null
+  value?: Cents
+  defaultValue?: Cents // defined to just fix typescript error
 }
 
-export function FieldCurrency({ currency='nzd', currencies, format, onChange, value, defaultValue, ...props }: FieldCurrencyProps) {
+export function FieldCurrency({ currency='nzd', currencies, format, onChange: onChangeProp, ...props }: FieldCurrencyProps) {
   const [dontFix, setDontFix] = useState(false)
-  const [settings, setSettings] = useState(() => getCurrencySettings(currency))
-  const [dollars, setDollars] = useState(() => toDollars(value, true, settings))
+  const [lastBlurred, setLastBlurred] = useState(0)
+  const [settings, setSettings] = useState(() => getCurrencySettings(currency, currencies, format, props.name))
   const [prefixWidth, setPrefixWidth] = useState(0)
-  const ref = useRef({ settings, dontFix }) // was null
+  const ref = useRef({ dontFix }) // was null
   const id = props.id || props.name
-  ref.current = { settings, dontFix }
+  ref.current = { dontFix }
 
+  // Since value and onChange are optional, we need need to create an internal value state
+  const [internalValue, setInternalValue] = useState<FieldCurrencyProps['value']>(props.value ?? props.defaultValue)
+  const inputValue = useMemo(() => to('dollars', internalValue, settings), [internalValue, settings.key, lastBlurred])
+  
+  // Update the internal value when the value changes outside of the component
   useEffect(() => {
-    if (settings.currency !== currency) {
-      const settings = getCurrencySettings(currency)
-      setSettings(settings)
-      setDollars(toDollars(value, true, settings)) // required latest _settings
-    }
-  }, [currency])
+    if (internalValue !== (props.value ?? props.defaultValue)) setInternalValue(props.value ?? props.defaultValue)
+  }, [props.value])
 
+  // Update the settings if the setting parameters change
   useEffect(() => {
-    if (ref.current.dontFix) {
-      setDollars(toDollars(value))
-      setDontFix(false)
-    } else {
-      setDollars(toDollars(value, true))
-    }
-  }, [value])
+    const _settings = getCurrencySettings(currency, currencies, format, props.name)
+    if (settings.key !== _settings.key) setSettings(_settings)
+  }, [currency, currencies, format])
 
+  // Get the prefix content width
   useEffect(() => {
-    // Get the prefix content width
     setPrefixWidth(settings.prefix ? getPrefixWidth(settings.prefix, 1) : 0)
   }, [settings.prefix])
 
-  function toCents(value?: string|number|null) {
-    const maxDecimals = ref.current.settings.maxDecimals
+  function to(type: 'dollars' | 'cents', value?: Cents, settings?: { maxDecimals?: number }) {
+    const maxDecimals = settings?.maxDecimals
     const parsed = parseFloat(value + '')
     if (!parsed && parsed !== 0) return null
     if (!maxDecimals) return parsed
-    const value2 = Math.round(parsed * Math.pow(10, maxDecimals)) // e.g. 1.23 => 123
-    // console.log('toCents', parsed, value2)
-    return value2
-  }
 
-  function toDollars(value?: string|number|null, toFixed?: boolean, settings?: { maxDecimals?: number }) {
-    const maxDecimals = (settings || ref.current.settings).maxDecimals
-    const parsed = parseFloat(value + '')
-    if (!parsed && parsed !== 0) return null
-    if (!maxDecimals) return parsed
-    const value2 = parsed / Math.pow(10, maxDecimals) // e.g. 1.23 => 123
-    // console.log('toDollars', value, value2)
-    return toFixed ? value2.toFixed(maxDecimals) : value2
-  }
+    const value2 = type === 'dollars' 
+      ? parsed / Math.pow(10, maxDecimals) 
+      : parsed * Math.pow(10, maxDecimals) // e.g. 1.23 => 123
 
-  function getCurrencySettings(currency: string) {
-    // parse CLDR currency string format, e.g. '¤#,##0.00'
-    const output: { 
-      currency: string,           // e.g. 'nzd'
-      decimalSeparator?: string,  // e.g. '.'
-      thousandSeparator?: string, // e.g. ','
-      minDecimals?: number,       // e.g. 2
-      maxDecimals?: number,       // e.g. 2
-      prefix?: string,            // e.g. '$'
-      suffix?: string             // e.g. ''
-    } = { currency }
-
-    let _format = format || defaultFormat
-    const _currencies = currencies ?? defaultCurrencies
-    const currencyObject = _currencies[currency as keyof typeof _currencies]
-    if (!currencyObject && currencies) {
-      console.error(
-        `The currency field "${props.name}" is using the currency "${currency}" which is not found in your currencies object`
-      )
-    } else if (!currencyObject && !currencies) {
-      console.error(
-        `The currency field "${props.name}" is using the currency "${currency}" which is not found in the 
-        default currencies, please provide a currencies object.`
-      )
-    }
-    const symbol = currencyObject ? currencyObject.symbol : ''
-    const digits = currencyObject ? currencyObject.digits : 2
-
-    // Check for currency symbol (¤) and determine its position
-    if (_format.indexOf('¤') !== -1) {
-      const position = _format.indexOf('¤') === 0 ? 'prefix' : 'suffix'
-      output[position] = symbol
-      _format = _format.replace('¤', '')
-    }
+    // dont fix when the user is typing.
+    if (type === 'dollars' && ref.current.dontFix) { setDontFix(false) }
 
-    // Find and set the thousands separator
-    const thousandMatch = _format.match(/[^0-9#]/)
-    if (thousandMatch) output.thousandSeparator = thousandMatch[0]
-
-    // Find and set the decimal separator and fraction digits
-    const decimalMatch = _format.match(/0[^0-9]/)
-    if (decimalMatch) {
-      output.decimalSeparator = decimalMatch[0].slice(1)
-      if (typeof digits !== 'undefined') {
-        output.minDecimals = digits
-        output.maxDecimals = digits
-      } else {
-        const fractionDigits = _format.split(output.decimalSeparator)[1]
-        if (fractionDigits) {
-          output.minDecimals = fractionDigits.length 
-          output.maxDecimals = fractionDigits.length
-        }
-      }
-    }
-    return output
+    // console.log('to', type, value, value2)
+    return type === 'cents' || ref.current.dontFix ? value2 : value2.toFixed(maxDecimals)
+  }
+
+  function onChange(source: 'event' | 'prop', floatValue?: number) {
+    if (source === 'event') setDontFix(true)
+    if (onChangeProp) onChangeProp({ target: { name: props.name, value: to('cents', floatValue, settings) }})
+    else setInternalValue(to('cents', floatValue, settings))
   }
 
   return (
@@ -148,20 +94,15 @@ export function FieldCurrency({ currency='nzd', currencies, format, onChange, va
         decimalSeparator={settings.decimalSeparator}
         thousandSeparator={settings.thousandSeparator}
         decimalScale={settings.maxDecimals}
-        onValueChange={!onChange ? undefined : ({ floatValue }, e) => {
-          // console.log('onValueChange', floatValue, e)
-          if (e.source === 'event') setDontFix(true)
-          onChange({ target: { name: props.name, value: toCents(floatValue) }})
-        }}
-        onBlur={() => { setDollars(toDollars(value, true))}}
+        onValueChange={({ floatValue }, e) => onChange(e.source, floatValue)}
+        onBlur={() => { setLastBlurred(Date.now())}}
         placeholder={props.placeholder || '0.00'}
-        value={dollars}
+        value={inputValue}
         style={{ textIndent: `${prefixWidth}px` }}
         type="text"
-        defaultValue={defaultValue}
       />
       <span
-        class={`absolute top-0 bottom-0 left-[12px] left-input-x inline-flex items-center select-none text-gray-500 text-input-base ${dollars !== null && settings.prefix == '$' ? 'text-foreground' : ''}`}
+        class={`absolute top-0 bottom-0 left-[12px] left-input-x inline-flex items-center select-none text-gray-500 text-input-base ${inputValue !== null && settings.prefix == '$' ? 'text-foreground' : ''}`}
       >
         {settings.prefix || settings.suffix}
       </span>
@@ -169,6 +110,71 @@ export function FieldCurrency({ currency='nzd', currencies, format, onChange, va
   )
 }
 
+function getCurrencySettings(currency: string, currencies?: Currencies, format?: string, name?: string) {
+  // parse CLDR currency string format, e.g. '¤#,##0.00'
+  const output: { 
+    key?: string               
+    currency: string,           // e.g. 'nzd'
+    decimalSeparator?: string,  // e.g. '.'
+    thousandSeparator?: string, // e.g. ','
+    minDecimals?: number,       // e.g. 2
+    maxDecimals?: number,       // e.g. 2
+    prefix?: string,            // e.g. '$'
+    suffix?: string             // e.g. ''
+  } = { currency }
+
+  let _format = format || defaultFormat
+  const _currencies = currencies ?? defaultCurrencies
+  const currencyObject = _currencies[currency as keyof typeof _currencies]
+  if (!currencyObject && currencies) {
+    console.error(
+      `The currency field "${name||''}" is using the currency "${currency}" which is not found in your currencies object`
+    )
+  } else if (!currencyObject && !currencies) {
+    console.error(
+      `The currency field "${name||''}" is using the currency "${currency}" which is not found in the 
+      default currencies, please provide a currencies object.`
+    )
+  }
+  const symbol = currencyObject ? currencyObject.symbol : ''
+  const digits = currencyObject ? currencyObject.digits : 2
+
+  // Check for currency symbol (¤) and determine its position
+  if (_format.indexOf('¤') !== -1) {
+    const position = _format.indexOf('¤') === 0 ? 'prefix' : 'suffix'
+    output[position] = symbol
+    _format = _format.replace('¤', '')
+  }
+
+  // Find and set the thousands separator
+  const thousandMatch = _format.match(/[^0-9#]/)
+  if (thousandMatch) output.thousandSeparator = thousandMatch[0]
+
+  // Find and set the decimal separator and fraction digits
+  const decimalMatch = _format.match(/0[^0-9]/)
+  if (decimalMatch) {
+    output.decimalSeparator = decimalMatch[0].slice(1)
+    if (typeof digits !== 'undefined') {
+      output.minDecimals = digits
+      output.maxDecimals = digits
+    } else {
+      const fractionDigits = _format.split(output.decimalSeparator)[1]
+      if (fractionDigits) {
+        output.minDecimals = fractionDigits.length 
+        output.maxDecimals = fractionDigits.length
+      }
+    }
+  }
+
+  // create stable key from final output
+  output.key = Object.keys(output)
+    .filter(k => k !== 'key')
+    .sort()
+    .map(k => `${k}:${output[k as keyof typeof output] ?? ''}`)
+    .join('|')
+  return output
+}
+
 export const defaultCurrencies: { [key: string]: { name: string, symbol: string, digits: number } } = {
   nzd: { name: 'New Zealand Dollar', symbol: '$', digits: 2 },
   aud: { name: 'Australian Dollar', symbol: '$', digits: 2 },

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

@@ -1,23 +1,24 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { format, isValid, parse } from 'date-fns'
+import { tz as _tz, TZDate } from '@date-fns/tz'
 import { getPrefixWidth } from 'nitro-web/util'
-import { Calendar, Dropdown, DropdownProps } from 'nitro-web'
+import { Button, Calendar, Dropdown, DropdownProps, TimePicker } from 'nitro-web'
 import { DayPickerProps } from '../element/calendar'
-import { TimePicker } from './field-time'
 
-type Mode = 'single' | 'multiple' | 'range'
+type Timestamp = null | number
+type TimestampArray = null | Timestamp[]
 type DropdownRef = {
   setIsActive: (value: boolean) => void
 }
 
-type PreFieldDateProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> & {
+type PreFieldDateProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'defaultValue'> & {
   /** field name or path on state (used to match errors), e.g. 'date', 'company.email' **/
   name: string
-  /** mode of the date picker */
-  mode: Mode
   /** name is used as the id if not provided */
   id?: string
-  /** show the time picker */
+  /** mode of the date picker */
+  mode: 'single' | 'multiple' | 'range' | 'time'
+  /** show the time picker for single mode*/
   showTime?: boolean
   /** prefix to add to the input */
   prefix?: string
@@ -31,116 +32,150 @@ type PreFieldDateProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onCh
   DayPickerProps?: DayPickerProps
   /** Dropdown props */
   DropdownProps?: DropdownProps
+  /** timezone to use for the date picker */
+  tz?: string
 }
 
-// An array is returned for mode = 'multiple' or 'range'
-export type FieldDateProps = (
-  | ({ mode: 'single' } & PreFieldDateProps & {
-      onChange?: (e: { target: { name: string, value: null|number } }) => void
-      value?: null|number|string
-    })
-  | ({ mode: 'multiple' | 'range' } & PreFieldDateProps & { 
-      onChange?: (e: { target: { name: string, value: (null|number)[] } }) => void 
-      value?: null|number|string|(null|number|string)[]
-    })
-)
+// Discriminated union types based on mode
+type FieldDatePropsSingle = PreFieldDateProps & {
+  mode: 'single' | 'time'
+  defaultValue?: Timestamp
+  onChange?: (e: { target: { name: string, value: Timestamp } }) => void
+  value?: Timestamp // gracefully handles falsey values
+}
+
+type FieldDatePropsMultiple = PreFieldDateProps & {
+  mode: 'multiple' | 'range'
+  defaultValue?: TimestampArray
+  onChange?: (e: { target: { name: string, value: TimestampArray } }) => void
+  value?: TimestampArray // gracefully handles falsey values
+}
+
+export type FieldDateProps = FieldDatePropsSingle | FieldDatePropsMultiple
+const errors: string[] = []
 
 export function FieldDate({
   dir = 'bottom-left',
   Icon,
-  mode,
   numberOfMonths,
   onChange: onChangeProp,
   prefix = '',
   showTime,
-  value: valueProp,
   DayPickerProps,
   DropdownProps,
+  tz,
   ...props
 }: FieldDateProps) {
-  // Currently this displays the dates in local timezone and saves in utc. We should allow the user to display the dates in a 
-  // different timezone.
-  const localePattern = `d MMM yyyy${showTime && mode == 'single' ? ' hh:mmaa' : ''}`
+  const [month, setMonth] = useState<number|undefined>()
+  const [preventInputValueUpdates, setPreventInputValueUpdates] = useState(false)
   const [prefixWidth, setPrefixWidth] = useState(0)
   const dropdownRef = useRef<DropdownRef>(null)
-  const [month, setMonth] = useState<number|undefined>()
-  const [lastUpdated, setLastUpdated] = useState(0)
+  const pattern = props.mode == 'time' ? 'hh:mmaa' :  `d MMM yyyy${showTime && props.mode == 'single' ? ' hh:mmaa' : ''}`
   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<typeof valueProp>(valueProp)
-  const value = valueProp ?? internalValue
-  const onChange = onChangeProp ?? ((e: { target: { name: string, value: any } }) => setInternalValue(e.target.value))
-    
-  // Convert the value to an array of valid* dates
-  const validDates = useMemo(() => {
-    const arrOfNumbers = Array.isArray(value) ? value : [value]
-    const out = arrOfNumbers.map((date) => {
-      if (typeof date === 'string' && !isNaN(parseFloat(date))) date = parseFloat(date)
-      return isValid(date) ? new Date(date as number) : null /// changed to null
-    })
-    return out
-  }, [value])
-
-  // Hold the input value in state
-  const [inputValue, setInputValue] = useState(() => getInputValue(validDates))
-
-  // Update the date's inputValue (text) when the value changes outside of the component
+  // Since value and onChange are optional, we need need to create an internal value state
+  const [internalValue, setInternalValue] = useState<Timestamp[]>(() => preInternalValue(props))
+  const inputValue = useMemo(() => getInputValue(internalValue), [internalValue])
+  const [inputValueSticky, setInputValueSticky] = useState(() => inputValue)
+  
+  // Update the internal value when the value changes outside of the component
+  useEffect(() => {
+    const newValue = preInternalValue(props)
+    for (let i=0; i<Math.max(internalValue.length, newValue.length); i++) {
+      if (internalValue[i] !== newValue[i]) {
+        setInternalValue(newValue)
+        break
+      }
+    }
+  }, [props.value])
+  
+  // Only update the sticky input when the input is blurred
   useEffect(() => {
-    if (new Date().getTime() > lastUpdated + 100) setInputValue(getInputValue(validDates))
-  }, [validDates])
+    if (!preventInputValueUpdates) setInputValueSticky(inputValue)
+  }, [inputValue, preventInputValueUpdates])
 
   // Get the prefix content width
   useEffect(() => {
     setPrefixWidth(getPrefixWidth(prefix, 4))
   }, [prefix])
 
-  function onCalendarChange(value: null|number|(null|number)[]) {
-    if (mode == 'single' && !showTime) dropdownRef.current?.setIsActive(false) // Close the dropdown
-    setInputValue(getInputValue(value))
-    // Update the value
-    onChange({ target: { name: props.name, value: getOutputValue(value) } })
-    setLastUpdated(new Date().getTime())
+  function preInternalValue(props: FieldDateProps) {
+    // Even though we are using types, the value may be different coming from the state, so lets sanitise/parse it.
+    // We need to use props.* to get type narrowing.
+    switch (props.mode) {
+      case 'single':
+      case 'time': {
+        const value = props?.value ?? props?.defaultValue
+        return [value && isValid(value) ? new Date(value).getTime() : null]
+      }
+      case 'multiple':
+      case 'range': {
+        const value = props.value ?? props?.defaultValue
+        if (!value || !Array.isArray(value)) {
+          const error = `FieldDate: ${props.name} value needs to be an array for mode 'multiple' or 'range', received`
+          if (value && !errors.includes(error)) { errors.push(error); console.error(error, value) }
+          return []
+        } else {
+          return value.map((timestamp) => {
+            return timestamp && isValid(timestamp) ? new Date(timestamp).getTime() : null
+          })
+        }
+      }
+    }
+  }
+
+  function getInputValue(value: Timestamp[]) {
+    return value.map(o => date(o, pattern, tz)).join(props.mode == 'range' ? ' - ' : ', ')
+  }
+
+  function onChange<T>(value: T) {
+    if (props.mode == 'single' && !showTime) dropdownRef.current?.setIsActive(false) // Close the dropdown
+    if (onChangeProp) onChangeProp({ target: { name: props.name, value: value as any } }) // type enforced in the parameter
+    else setInternalValue(preInternalValue({ ...props, value: value } as FieldDateProps))
   }
 
   function onInputChange(e: React.ChangeEvent<HTMLInputElement>) {
     // Calls onChange (should update state, thus updating the value) with "raw" values
-    setInputValue(e.target.value) // keep the input value in sync
+    setInputValueSticky(e.target.value) // keep the sticky input value in sync
+    setPreventInputValueUpdates(true)
 
-    let split = e.target.value.split(/-|,/).map(o => {
-      const date = parse(o.trim(), localePattern, new Date())
-      return isValid(date) ? date : null
+    // Parse the datestring into timestamps
+    let timestamps = e.target.value.split(/-|,/).map(o => {
+      return parseDateString(o.trim(), pattern, tz)
     })
-    
-    // For single/range we need limit the array
-    if (mode == 'range' && split.length > 1) split.length = 2
-    else if (mode == 'multiple') split = split.filter(o => o) // remove invalid dates
 
-    // Swap dates if needed
-    if (mode == 'range' && (split[0] || 0) > (split[1] || 0)) split = [split[0], split[0]]
+    // For range mode we need limit the array to 2
+    if (props.mode == 'range' && timestamps.length > 1) timestamps.length = 2
+
+    // Swap range dates if needed
+    if (props.mode == 'range' && (timestamps[0] || 0) > (timestamps[1] || 0)) timestamps = [timestamps[0], timestamps[0]]
 
-    // Set month
-    for (let i=split.length; i--;) {
-      if (split[i]) setMonth((split[i] as Date).getTime())
-      break
+    // Remove/nullify invalid dates
+    if (props.mode == 'range') timestamps = timestamps.map(o => o ?? null)
+    else if (props.mode == 'multiple') timestamps = timestamps.filter(o => o)
+
+    // Set month for date mode
+    if (props.mode != 'time') {
+      for (let i=timestamps.length; i--;) {
+        if (timestamps[i]) setMonth(timestamps[i] as number)
+        break
+      }
     }
     
     // Update the value
-    const value = mode == 'single' ? split[0]?.getTime() ?? null : split.map(d => d?.getTime() ?? null)
-    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' ? ' - ' : ', ')
+    const value = props.mode == 'single' || props.mode == 'time' ? timestamps[0] ?? null : timestamps
+    onChange(value)
+  }
+
+  function onNowClick() {
+    onChange(new Date().getTime())
   }
   
-  function getOutputValue(value: Date|number|null|(Date|number|null)[]): any {
-    // console.log(value)
-    return value
+  // Common props for the Calendar component
+  const commonCalendarProps = { 
+    className: 'pt-1 pb-2 px-3', month: month, numberOfMonths: numberOfMonths, preserveTime: !!showTime, tz: tz, ...DayPickerProps,
   }
-
+  
   return (
     <Dropdown
       ref={dropdownRef}
@@ -148,20 +183,34 @@ export function FieldDate({
       // animate={false}
       // menuIsOpen={true}
       minWidth={0}
+      dir={dir}
       menuContent={
-        <div className="flex">
-          <Calendar 
-            // Calendar actually accepts an array of dates, but the type is not typed correctly
-            {...{ mode: mode, value: validDates as any, numberOfMonths: numberOfMonths, month: month }}
-            {...DayPickerProps}
-            preserveTime={!!showTime} 
-            onChange={onCalendarChange} 
-            className="pt-1 pb-2 px-3" 
-          />
-          {!!showTime && mode == 'single' && <TimePicker date={validDates?.[0] ?? undefined} onChange={onCalendarChange} />}
+        <div>
+          <div className="flex">
+            {
+              props.mode == 'single' &&
+              <Calendar {...commonCalendarProps} mode="single" value={internalValue[0]} onChange={onChange<Timestamp>} />
+            }
+            {
+              (props.mode == 'range' || props.mode == 'multiple') &&
+              <Calendar {...commonCalendarProps} mode={props.mode} value={internalValue} onChange={onChange<TimestampArray>} />
+            }
+            {
+              (props.mode == 'time' || (!!showTime && props.mode == 'single')) &&
+              <TimePicker value={internalValue?.[0]} onChange={onChange<Timestamp>} 
+                className={`border-l border-gray-100 ${props.mode == 'single' ? 'min-h-[0]' : ''}`} 
+              />
+            }
+          </div>
+          {
+            props.mode == 'time' && 
+            <div className="flex justify-between p-2 border-t border-gray-100">
+              <Button color="secondary" size="xs" onClick={() => onNowClick()}>Now</Button>
+              <Button color="primary" size="xs" onClick={() => dropdownRef.current?.setIsActive(false)}>Done</Button>
+            </div>
+          }
         </div>
       }
-      dir={dir}
       {...DropdownProps}
     > 
       <div className="grid grid-cols-1">
@@ -173,19 +222,44 @@ export function FieldDate({
             {prefix}
           </span>
         }
-        <input 
+        <input
           {...props}
           key={'k' + prefixWidth}
           id={id}
           autoComplete="off" 
-          className={(props.className||'')}// + props.className?.includes('is-invalid') ? ' is-invalid' : ''} 
-          onBlur={() => setInputValue(getInputValue(validDates))} // onChange should of updated the value -> validValue by this point
+          className={(props.className || '')}// + props.className?.includes('is-invalid') ? ' is-invalid' : ''} 
           onChange={onInputChange}
+          onBlur={() => setPreventInputValueUpdates(false)}
           style={{ textIndent: prefixWidth + 'px' }}
           type="text"
-          value={inputValue}
+          value={inputValueSticky} // allways controlled
+          defaultValue={undefined}
         />
       </div>
     </Dropdown>
   )
 }
+
+/**
+ * Parse a date string into a timestamp, optionally, from another timezone
+ * @param value - date string to parse
+ * @param pattern - date format pattern
+ * @param [referenceDate] - required if value doesn't contain a date, e.g. for time only
+ * @param [tz] - timezone
+ */
+function parseDateString(value: string, pattern: string, tz?: string, referenceDate?: Date) {
+  const parsedDate = parse(value.trim(), pattern, referenceDate ?? new Date(), tz ? { in: _tz(tz) } : undefined)
+  if (!isValid(parsedDate)) return null
+  else return parsedDate.getTime()
+}
+
+/**
+ * Returns a formatted date string
+ * @param [value] - timestamp or date
+ * @param [format] - e.g. "dd mmmm yy" (https://date-fns.org/v4.1.0/docs/format#)
+ * @param [tz] - display in this timezone
+ */
+export function date(value?: null|number|Date, pattern?: string, tz?: string) {
+  if (!value || !isValid(value)) return ''
+  return format((tz ? new TZDate(value as number, tz) : value), pattern ?? 'do MMMM')
+}