feat(forms): add defaultValue to all Value.* components (#3627)

packages/dnb-eufemia/src/extensions/forms/Value/Number/Number.tsx

@@ -12,8 +12,11 @@ import {
   convertCamelCaseProps,
 } from '../../../../shared/helpers/withCamelCaseProps'
 
-export type Props = ValueProps<number> &
-  IncludeCamelCase<NumberFormatProps>
+export type Props = Omit<ValueProps<number>, 'defaultValue'> &
+  IncludeCamelCase<NumberFormatProps> &
+  Partial<{
+    defaultValue?: number | string
+  }>
 
 function NumberValue(props: Props) {
   const { value, inline, showEmpty, className, ...rest } =

packages/dnb-eufemia/src/extensions/forms/Value/ValueDocs.ts

@@ -2,7 +2,12 @@ import { PropertiesTableProps } from '../../../shared/types'
 
 export const ValueProperties: PropertiesTableProps = {
   value: {
-    doc: 'Source data value for the input.',
+    doc: 'Value for the value component. Will take precedence over the path value given in the data context.',
+    type: '{valueType}',
+    status: 'optional',
+  },
+  defaultValue: {
+    doc: 'Default value for the value component. Will not take precedence over the path value given in the data context.',
     type: '{valueType}',
     status: 'optional',
   },

packages/dnb-eufemia/src/extensions/forms/hooks/DataValueDocs.ts

@@ -2,12 +2,12 @@ import { PropertiesTableProps } from '../../../shared/types'
 
 export const dataValueProperties: PropertiesTableProps = {
   value: {
-    doc: 'Source data value for the field.',
+    doc: 'Source data value for the field Will take precedence over the path value given in the data context..',
     type: '{valueType}',
     status: 'optional',
   },
   defaultValue: {
-    doc: 'Source data value for the field.',
+    doc: 'Default source data value for the field. Will not take precedence over the path value given in the data context.',
     type: '{valueType}',
     status: 'optional',
   },

packages/dnb-eufemia/src/extensions/forms/hooks/__tests__/useValueProps.test.tsx

@@ -43,6 +43,44 @@ describe('useValueProps', () => {
     expect(result.current.value).toBe(undefined)
   })
 
+  it('given "value" should take precedence over data context value', () => {
+    const givenValue = 'given value'
+    const value = 'use this value'
+
+    const { result } = renderHook(
+      () => useValueProps({ path: '/foo', value }),
+      {
+        wrapper: (props) => (
+          <Provider data={{ foo: givenValue }} {...props} />
+        ),
+      }
+    )
+
+    expect(result.current.value).toBe(value)
+  })
+
+  it('given "defaultValue" should not take precedence over data context value', () => {
+    const givenValue = 'given value'
+    const defaultValue = 'use this value'
+
+    const { result, rerender } = renderHook(useValueProps, {
+      initialProps: {
+        path: '/foo',
+        value: defaultValue,
+        defaultValue: undefined,
+      },
+      wrapper: (props) => (
+        <Provider data={{ foo: givenValue }} {...props} />
+      ),
+    })
+
+    expect(result.current.value).toBe(defaultValue)
+
+    rerender({ path: '/foo', value: undefined, defaultValue })
+
+    expect(result.current.value).toBe(givenValue)
+  })
+
   it('should forward other props', () => {
     const value = 'value'
 

packages/dnb-eufemia/src/extensions/forms/hooks/useValueProps.ts

@@ -14,6 +14,7 @@ export default function useValueProps<
     path: pathProp,
     itemPath,
     value,
+    defaultValue,
     transformIn = (value: Value) => value,
     toInput = (value: Value) => value,
     fromExternal = (value: Value) => value,
@@ -27,12 +28,13 @@ export default function useValueProps<
 
   const { path } = usePath({ path: pathProp, itemPath })
 
-  const externalValue = useExternalValue<Value>({
-    path,
-    itemPath,
-    value,
-    transformers,
-  })
+  const externalValue =
+    useExternalValue<Value>({
+      path,
+      itemPath,
+      value,
+      transformers,
+    }) ?? defaultValue
 
   const dataContext = useContext(DataContext)
   dataContext?.setValueProps?.(path, props)

packages/dnb-eufemia/src/extensions/forms/types.ts

@@ -70,9 +70,9 @@ export interface DefaultErrorMessages {
 
 export interface DataValueReadProps<Value = unknown> {
   /** JSON Pointer for where the data for this field is located in the source dataset */
-  path?: string
+  path?: Path
   /** JSON Pointer for where the data for this field is located in the source iterate loop element */
-  itemPath?: string
+  itemPath?: Path
   /** Source data value for the field. Will take precedence over the path value given in the data context */
   value?: Value
   /** Default source data value for the field. Will not take precedence over the path value given in the data context */