@zeno-lib/forms 0.3.0 → 0.5.0

package/src/fields/percentage-field.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import { useFieldContext } from "@zeno-lib/forms/lib/contexts"
+import { getEmptyValue } from "@zeno-lib/forms/lib/empty-value"
 import { useFormattedNumber } from "@zeno-lib/forms/lib/use-formatted-number"
 import { InputGroupAddon, InputGroupText } from "@/components/ui/input-group"
 import { InputField, type InputFieldProps } from "./input-field"
@@ -54,7 +55,8 @@ function PercentageField({
     maximumFractionDigits: fractionDigits,
     min,
     onBlur: field.handleBlur,
-    onValueChange: (next) => field.handleChange(next),
+    onValueChange: (next) =>
+      field.handleChange(next ?? getEmptyValue(field, null)),
     value: field.state.value,
     ...(isFraction ? { fromDisplay: fromPercent, toDisplay: toPercent } : {}),
   })

package/src/fields/radio-group-field.tsx

@@ -5,6 +5,7 @@ import { useFieldContext } from "@zeno-lib/forms/lib/contexts"
 import {
   useHideFieldErrors,
   useIsFieldRequired,
+  useIsFieldRequiredBySchema,
   useIsInvalid,
 } from "@zeno-lib/forms/lib/use-is-invalid"
 import { type ComponentProps, type ReactNode, useId } from "react"
@@ -24,7 +25,10 @@ type RadioGroupFieldProps = Omit<
 > & {
   description?: ReactNode
   label?: ReactNode
-  /** Force the required `*` indicator on or off. Defaults to schema-derived. */
+  /**
+   * Mark the field required, or not, over the schema. Drives the `*` and
+   * `aria-required`.
+   */
   required?: boolean
 }
 
@@ -35,7 +39,7 @@ function RadioGroupField({
   required,
   ...props
 }: RadioGroupFieldProps) {
-  const field = useFieldContext<string>()
+  const field = useFieldContext()
   const id = useId()
   const errorId = `${id}-error`
   const descriptionId = `${id}-description`
@@ -44,6 +48,8 @@ function RadioGroupField({
   const showError = isInvalid && !hideErrors
   const schemaRequired = useIsFieldRequired(field)
   const isRequired = required ?? schemaRequired
+  const schemaRequiresValue = useIsFieldRequiredBySchema(field)
+  const requiresValue = required ?? schemaRequiresValue
 
   return (
     <Field data-field={field.name} data-invalid={isInvalid}>
@@ -59,9 +65,10 @@ function RadioGroupField({
           [showError, errorId]
         )}
         aria-invalid={isInvalid || undefined}
+        aria-required={requiresValue || undefined}
         name={field.name}
-        onValueChange={(value) => field.handleChange(String(value))}
-        value={field.state.value ?? ""}
+        onValueChange={(value) => field.handleChange(value)}
+        value={field.state.value ?? null}
         {...props}
       >
         {children}

package/src/fields/select-field.tsx

@@ -5,10 +5,11 @@ import { useFieldContext } from "@zeno-lib/forms/lib/contexts"
 import {
   useHideFieldErrors,
   useIsFieldRequired,
+  useIsFieldRequiredBySchema,
   useIsInvalid,
 } from "@zeno-lib/forms/lib/use-is-invalid"
 import type { ComponentProps, ReactNode } from "react"
-import { Children, isValidElement, useId, useMemo } from "react"
+import { Children, isValidElement, useId, useMemo, useRef } from "react"
 import {
   Field,
   FieldDescription,
@@ -31,7 +32,10 @@ type SelectFieldProps = Omit<
   description?: ReactNode
   label?: ReactNode
   placeholder?: string
-  /** Force the required `*` indicator on or off. Defaults to schema-derived. */
+  /**
+   * Mark the field required, or not, over the schema. Drives the `*` and
+   * `aria-required`.
+   */
   required?: boolean
   triggerClassName?: string
   triggerSize?: ComponentProps<typeof SelectTrigger>["size"]
@@ -41,6 +45,7 @@ function SelectField({
   children,
   description,
   label,
+  onOpenChange,
   placeholder,
   required,
   triggerClassName,
@@ -48,6 +53,10 @@ function SelectField({
   ...props
 }: SelectFieldProps) {
   const field = useFieldContext()
+  // Opening the popup moves focus into it, so the trigger's blur would mark
+  // the field touched, and show a required error, before anything is picked.
+  // The field is touched once the popup closes, or focus leaves it closed.
+  const isOpen = useRef<boolean>(false)
   const id = useId()
   const errorId = `${id}-error`
   const descriptionId = `${id}-description`
@@ -56,6 +65,8 @@ function SelectField({
   const showError = isInvalid && !hideErrors
   const schemaRequired = useIsFieldRequired(field)
   const isRequired = required ?? schemaRequired
+  const schemaRequiresValue = useIsFieldRequiredBySchema(field)
+  const requiresValue = required ?? schemaRequiresValue
 
   const items = useMemo(() => {
     const map: Record<string, ReactNode> = {}
@@ -81,6 +92,13 @@ function SelectField({
       <Select
         items={items}
         name={field.name}
+        onOpenChange={(open, eventDetails) => {
+          isOpen.current = open
+          if (!open) {
+            field.handleBlur()
+          }
+          onOpenChange?.(open, eventDetails)
+        }}
         onValueChange={(value) => field.handleChange(value)}
         value={field.state.value ?? null}
         {...props}
@@ -91,9 +109,14 @@ function SelectField({
             [showError, errorId]
           )}
           aria-invalid={isInvalid || undefined}
+          aria-required={requiresValue || undefined}
           className={triggerClassName}
           id={id}
-          onBlur={field.handleBlur}
+          onBlur={() => {
+            if (!isOpen.current) {
+              field.handleBlur()
+            }
+          }}
           size={triggerSize}
         >
           <SelectValue placeholder={placeholder} />

package/src/fields/switch-field.tsx

@@ -5,6 +5,7 @@ import { useFieldContext } from "@zeno-lib/forms/lib/contexts"
 import {
   useHideFieldErrors,
   useIsFieldRequired,
+  useIsFieldRequiredBySchema,
   useIsInvalid,
 } from "@zeno-lib/forms/lib/use-is-invalid"
 import { type ComponentProps, type ReactNode, useId } from "react"
@@ -24,7 +25,10 @@ type SwitchFieldProps = Omit<
 > & {
   description?: ReactNode
   label?: ReactNode
-  /** Force the required `*` indicator on or off. Defaults to schema-derived. */
+  /**
+   * Mark the field required, or not, over the schema. Drives the `*` and
+   * `aria-required`.
+   */
   required?: boolean
 }
 
@@ -43,6 +47,8 @@ function SwitchField({
   const showError = isInvalid && !hideErrors
   const schemaRequired = useIsFieldRequired(field)
   const isRequired = required ?? schemaRequired
+  const schemaRequiresValue = useIsFieldRequiredBySchema(field)
+  const requiresValue = required ?? schemaRequiresValue
 
   return (
     <Field
@@ -70,6 +76,7 @@ function SwitchField({
           [showError, errorId]
         )}
         aria-invalid={isInvalid || undefined}
+        aria-required={requiresValue || undefined}
         checked={field.state.value ?? false}
         id={id}
         name={field.name}

package/src/fields/textarea-field.tsx

@@ -5,6 +5,7 @@ import { useFieldContext } from "@zeno-lib/forms/lib/contexts"
 import {
   useHideFieldErrors,
   useIsFieldRequired,
+  useIsFieldRequiredBySchema,
   useIsInvalid,
 } from "@zeno-lib/forms/lib/use-is-invalid"
 import { Children, type ComponentProps, type ReactNode, useId } from "react"
@@ -25,7 +26,10 @@ type TextAreaFieldProps = Omit<
   children?: ReactNode
   description?: ReactNode
   label?: ReactNode
-  /** Force the required `*` indicator on or off. Defaults to schema-derived. */
+  /**
+   * Mark the field required, or not, over the schema. Drives the `*` and
+   * `aria-required`.
+   */
   required?: boolean
 }
 
@@ -46,6 +50,8 @@ function TextAreaField({
   const hasAddons = Children.count(children) > 0
   const schemaRequired = useIsFieldRequired(field)
   const isRequired = required ?? schemaRequired
+  const schemaRequiresValue = useIsFieldRequiredBySchema(field)
+  const requiresValue = required ?? schemaRequiresValue
 
   const textareaProps = {
     "aria-describedby": describedBy(
@@ -53,6 +59,7 @@ function TextAreaField({
       [showError, errorId]
     ),
     "aria-invalid": isInvalid || undefined,
+    "aria-required": requiresValue || undefined,
     id,
     name: field.name,
     onBlur: field.handleBlur,

package/src/fields/year-field.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import { useFieldContext } from "@zeno-lib/forms/lib/contexts"
+import { getEmptyValue } from "@zeno-lib/forms/lib/empty-value"
 import { useFormattedNumber } from "@zeno-lib/forms/lib/use-formatted-number"
 import { InputField, type InputFieldProps } from "./input-field"
 
@@ -36,7 +37,8 @@ function YearField({ max, min, ...props }: YearFieldProps) {
     maximumFractionDigits: 0,
     min,
     onBlur: field.handleBlur,
-    onValueChange: (next) => field.handleChange(next),
+    onValueChange: (next) =>
+      field.handleChange(next ?? getEmptyValue(field, null)),
     useGrouping: false,
     value: field.state.value,
   })