@lmb-it/kitsconcerto-native 0.1.270 → 0.1.271

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/form-renderer/Form.cjs +2 -0
  2. package/form-renderer/Form.cjs.map +1 -1
  3. package/form-renderer/Form.js +2 -0
  4. package/form-renderer/Form.js.map +1 -1
  5. package/form-renderer/components/FormRenderer/index.cjs +3 -1
  6. package/form-renderer/components/FormRenderer/index.cjs.map +1 -1
  7. package/form-renderer/components/FormRenderer/index.js +3 -1
  8. package/form-renderer/components/FormRenderer/index.js.map +1 -1
  9. package/index.d.ts +24 -1
  10. package/package.json +1 -1
package/form-renderer/Form.cjs CHANGED
@@ -19,6 +19,7 @@ const Form = ({
19
19
  outputFormat = "Json",
20
20
  id = "go-markets-form",
21
21
  grid,
22
+ rowGap,
22
23
  onChangeSingleValue,
23
24
  onChange,
24
25
  submitButtonProps,
@@ -115,6 +116,7 @@ const Form = ({
115
116
  elements,
116
117
  control,
117
118
  grid,
119
+ rowGap,
118
120
  getValues,
119
121
  focusedField,
120
122
  setFocusedField
package/form-renderer/Form.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Form.cjs","sources":["../../../src/form-renderer/Form.tsx"],"sourcesContent":["// Form/Form.tsx\n\nimport React, {useEffect, useImperativeHandle, useMemo, useState} from 'react';\nimport {\n type DeepPartial,\n type FieldValues,\n FormProvider,\n type UseFormReset,\n type UseFormSetValue\n} from 'react-hook-form';\nimport {useFormManager} from './hooks';\nimport type {IFormComponent, IUseFormReturn, SetManyOpts} from \"@lmb-it/kitsconcerto-types\";\nimport {SubmitButton} from \"./components/SubmitButton\";\nimport {FormRenderer} from \"./components/FormRenderer\";\nimport {Flex} from \"../_compat\";\n\nconst Form = <T extends FieldValues>({\n elements,\n onSubmit,\n onInvalidSubmit,\n outputFormat = 'Json',\n id = \"go-markets-form\",\n grid, onChangeSingleValue,\n onChange,\n submitButtonProps,\n onMount,\n ref,\n children,\n animation,\n style\n }: IFormComponent<T>) => {\n\n const [isSubmitting, setIsSubmitting] = useState(false);\n\n // Destructure the new, corrected return shape from the hook\n const {formMethods, handleSubmit} = useFormManager({\n elements,\n onSubmit,\n onInvalidSubmit,\n outputFormat,\n onChangeSingleValue,\n onChange, id\n }, isSubmitting, setIsSubmitting);\n\n const [focusedField, setFocusedField] = useState<string>('');\n // Destructure the specific methods we need for the renderer from the original formMethods\n const {getValues, control, formState} = formMethods;\n\n useEffect(() => {\n onMount && onMount(formMethods)\n }, []);\n\n /** Factory. Feed setValue/reset from your useFormManager. */\n function createFormAppliers<T extends FieldValues>(deps: {\n setValue: UseFormSetValue<T>;\n reset?: UseFormReset<T>;\n getValues?: () => T;\n }) {\n const {setValue, reset, getValues} = deps;\n\n /** Patch many fields (deep paths supported). */\n const setValues = (patch: DeepPartial<T>, opts: SetManyOpts = {shouldDirty: true}) => {\n const walk = (base: string, v: unknown) => {\n if (v !== null && typeof v === \"object\" && !Array.isArray(v)) {\n for (const [k, vv] of Object.entries(v as Record<string, unknown>)) {\n walk(base ? `${base}.${k}` : k, vv);\n }\n } else {\n setValue(base as any, v as any, opts);\n }\n };\n walk(\"\", patch as any);\n };\n\n /** Merge patch into current values using reset (fast for large updates). */\n const mergeReset = (patch: DeepPartial<T>) => {\n if (!reset || !getValues) return;\n const cur = getValues();\n const deepMerge = (a: any, b: any): any => {\n const out: any = Array.isArray(a) ? [...a] : {...a};\n for (const k of Object.keys(b ?? {})) {\n const bv = (b as any)[k];\n out[k] =\n bv && typeof bv === \"object\" && !Array.isArray(bv)\n ? deepMerge(out[k] ?? {}, bv)\n : bv;\n }\n return out;\n };\n reset(deepMerge(cur, patch), {\n keepErrors: true,\n keepDirty: true,\n keepTouched: true,\n keepSubmitCount: true,\n });\n };\n\n return {setValues, mergeReset};\n }\n\n const IRefReturn: IUseFormReturn<T> = useMemo(() => {\n return {\n id,\n setIsSubmitting,\n ...formMethods,\n ...createFormAppliers({\n setValue: formMethods.setValue,\n reset: formMethods.reset,\n getValues: formMethods.getValues,\n }),\n onFormSubmit: handleSubmit,\n }\n }, [handleSubmit, formMethods, setIsSubmitting, id])\n useImperativeHandle(ref, () => {\n return IRefReturn;\n }, [formState]);\n\n\n\n return (\n // Pass ONLY the original, unmodified formMethods to the provider. This fixes the error.\n <FormProvider {...formMethods}>\n <Flex\n id={id}\n w={\"full\"}\n gap={10}\n flexDirection={\"column\"}\n position={'relative'}\n entering={animation?.entering}\n exiting={animation?.exiting}\n animationDuration={animation?.animationDuration}\n animationDelay={animation?.animationDelay}\n {...(style || {})}>\n\n\n <FormRenderer\n elements={elements}\n control={control}\n grid={grid}\n getValues={getValues}\n focusedField={focusedField}\n setFocusedField={setFocusedField}\n />\n\n {typeof children === \"function\"\n ? children(IRefReturn)\n : children}\n\n {submitButtonProps != \"none\" && (\n <Flex justifyContent=\"flex-end\" w=\"full\">\n <SubmitButton\n submitButtonProps={submitButtonProps}\n formMethods={formMethods}\n isSubmitting={isSubmitting}\n handleSubmit={handleSubmit}\n />\n </Flex>\n )}\n </Flex>\n </FormProvider>\n );\n};\n\nexport default Form;\n"],"names":["useState","useFormManager","useEffect","getValues","useMemo","useImperativeHandle","jsx","FormProvider","jsxs","Flex","FormRenderer","SubmitButton"],"mappings":"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"}
1
+ {"version":3,"file":"Form.cjs","sources":["../../../src/form-renderer/Form.tsx"],"sourcesContent":["// Form/Form.tsx\n\nimport React, {useEffect, useImperativeHandle, useMemo, useState} from 'react';\nimport {\n type DeepPartial,\n type FieldValues,\n FormProvider,\n type UseFormReset,\n type UseFormSetValue\n} from 'react-hook-form';\nimport {useFormManager} from './hooks';\nimport type {IFormComponent, IUseFormReturn, SetManyOpts} from \"@lmb-it/kitsconcerto-types\";\nimport {SubmitButton} from \"./components/SubmitButton\";\nimport {FormRenderer} from \"./components/FormRenderer\";\nimport {Flex} from \"../_compat\";\n\nconst Form = <T extends FieldValues>({\n elements,\n onSubmit,\n onInvalidSubmit,\n outputFormat = 'Json',\n id = \"go-markets-form\",\n grid, rowGap, onChangeSingleValue,\n onChange,\n submitButtonProps,\n onMount,\n ref,\n children,\n animation,\n style\n }: IFormComponent<T>) => {\n\n const [isSubmitting, setIsSubmitting] = useState(false);\n\n // Destructure the new, corrected return shape from the hook\n const {formMethods, handleSubmit} = useFormManager({\n elements,\n onSubmit,\n onInvalidSubmit,\n outputFormat,\n onChangeSingleValue,\n onChange, id\n }, isSubmitting, setIsSubmitting);\n\n const [focusedField, setFocusedField] = useState<string>('');\n // Destructure the specific methods we need for the renderer from the original formMethods\n const {getValues, control, formState} = formMethods;\n\n useEffect(() => {\n onMount && onMount(formMethods)\n }, []);\n\n /** Factory. Feed setValue/reset from your useFormManager. */\n function createFormAppliers<T extends FieldValues>(deps: {\n setValue: UseFormSetValue<T>;\n reset?: UseFormReset<T>;\n getValues?: () => T;\n }) {\n const {setValue, reset, getValues} = deps;\n\n /** Patch many fields (deep paths supported). */\n const setValues = (patch: DeepPartial<T>, opts: SetManyOpts = {shouldDirty: true}) => {\n const walk = (base: string, v: unknown) => {\n if (v !== null && typeof v === \"object\" && !Array.isArray(v)) {\n for (const [k, vv] of Object.entries(v as Record<string, unknown>)) {\n walk(base ? `${base}.${k}` : k, vv);\n }\n } else {\n setValue(base as any, v as any, opts);\n }\n };\n walk(\"\", patch as any);\n };\n\n /** Merge patch into current values using reset (fast for large updates). */\n const mergeReset = (patch: DeepPartial<T>) => {\n if (!reset || !getValues) return;\n const cur = getValues();\n const deepMerge = (a: any, b: any): any => {\n const out: any = Array.isArray(a) ? [...a] : {...a};\n for (const k of Object.keys(b ?? {})) {\n const bv = (b as any)[k];\n out[k] =\n bv && typeof bv === \"object\" && !Array.isArray(bv)\n ? deepMerge(out[k] ?? {}, bv)\n : bv;\n }\n return out;\n };\n reset(deepMerge(cur, patch), {\n keepErrors: true,\n keepDirty: true,\n keepTouched: true,\n keepSubmitCount: true,\n });\n };\n\n return {setValues, mergeReset};\n }\n\n const IRefReturn: IUseFormReturn<T> = useMemo(() => {\n return {\n id,\n setIsSubmitting,\n ...formMethods,\n ...createFormAppliers({\n setValue: formMethods.setValue,\n reset: formMethods.reset,\n getValues: formMethods.getValues,\n }),\n onFormSubmit: handleSubmit,\n }\n }, [handleSubmit, formMethods, setIsSubmitting, id])\n useImperativeHandle(ref, () => {\n return IRefReturn;\n }, [formState]);\n\n\n\n return (\n // Pass ONLY the original, unmodified formMethods to the provider. This fixes the error.\n <FormProvider {...formMethods}>\n <Flex\n id={id}\n w={\"full\"}\n gap={10}\n flexDirection={\"column\"}\n position={'relative'}\n entering={animation?.entering}\n exiting={animation?.exiting}\n animationDuration={animation?.animationDuration}\n animationDelay={animation?.animationDelay}\n {...(style || {})}>\n\n\n <FormRenderer\n elements={elements}\n control={control}\n grid={grid}\n rowGap={rowGap}\n getValues={getValues}\n focusedField={focusedField}\n setFocusedField={setFocusedField}\n />\n\n {typeof children === \"function\"\n ? children(IRefReturn)\n : children}\n\n {submitButtonProps != \"none\" && (\n <Flex justifyContent=\"flex-end\" w=\"full\">\n <SubmitButton\n submitButtonProps={submitButtonProps}\n formMethods={formMethods}\n isSubmitting={isSubmitting}\n handleSubmit={handleSubmit}\n />\n </Flex>\n )}\n </Flex>\n </FormProvider>\n );\n};\n\nexport default Form;\n"],"names":["useState","useFormManager","useEffect","getValues","useMemo","useImperativeHandle","jsx","FormProvider","jsxs","Flex","FormRenderer","SubmitButton"],"mappings":"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"}
package/form-renderer/Form.js CHANGED
@@ -15,6 +15,7 @@ const Form = ({
15
15
  outputFormat = "Json",
16
16
  id = "go-markets-form",
17
17
  grid,
18
+ rowGap,
18
19
  onChangeSingleValue,
19
20
  onChange,
20
21
  submitButtonProps,
@@ -111,6 +112,7 @@ const Form = ({
111
112
  elements,
112
113
  control,
113
114
  grid,
115
+ rowGap,
114
116
  getValues,
115
117
  focusedField,
116
118
  setFocusedField
package/form-renderer/Form.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Form.js","sources":["../../../src/form-renderer/Form.tsx"],"sourcesContent":["// Form/Form.tsx\n\nimport React, {useEffect, useImperativeHandle, useMemo, useState} from 'react';\nimport {\n type DeepPartial,\n type FieldValues,\n FormProvider,\n type UseFormReset,\n type UseFormSetValue\n} from 'react-hook-form';\nimport {useFormManager} from './hooks';\nimport type {IFormComponent, IUseFormReturn, SetManyOpts} from \"@lmb-it/kitsconcerto-types\";\nimport {SubmitButton} from \"./components/SubmitButton\";\nimport {FormRenderer} from \"./components/FormRenderer\";\nimport {Flex} from \"../_compat\";\n\nconst Form = <T extends FieldValues>({\n elements,\n onSubmit,\n onInvalidSubmit,\n outputFormat = 'Json',\n id = \"go-markets-form\",\n grid, onChangeSingleValue,\n onChange,\n submitButtonProps,\n onMount,\n ref,\n children,\n animation,\n style\n }: IFormComponent<T>) => {\n\n const [isSubmitting, setIsSubmitting] = useState(false);\n\n // Destructure the new, corrected return shape from the hook\n const {formMethods, handleSubmit} = useFormManager({\n elements,\n onSubmit,\n onInvalidSubmit,\n outputFormat,\n onChangeSingleValue,\n onChange, id\n }, isSubmitting, setIsSubmitting);\n\n const [focusedField, setFocusedField] = useState<string>('');\n // Destructure the specific methods we need for the renderer from the original formMethods\n const {getValues, control, formState} = formMethods;\n\n useEffect(() => {\n onMount && onMount(formMethods)\n }, []);\n\n /** Factory. Feed setValue/reset from your useFormManager. */\n function createFormAppliers<T extends FieldValues>(deps: {\n setValue: UseFormSetValue<T>;\n reset?: UseFormReset<T>;\n getValues?: () => T;\n }) {\n const {setValue, reset, getValues} = deps;\n\n /** Patch many fields (deep paths supported). */\n const setValues = (patch: DeepPartial<T>, opts: SetManyOpts = {shouldDirty: true}) => {\n const walk = (base: string, v: unknown) => {\n if (v !== null && typeof v === \"object\" && !Array.isArray(v)) {\n for (const [k, vv] of Object.entries(v as Record<string, unknown>)) {\n walk(base ? `${base}.${k}` : k, vv);\n }\n } else {\n setValue(base as any, v as any, opts);\n }\n };\n walk(\"\", patch as any);\n };\n\n /** Merge patch into current values using reset (fast for large updates). */\n const mergeReset = (patch: DeepPartial<T>) => {\n if (!reset || !getValues) return;\n const cur = getValues();\n const deepMerge = (a: any, b: any): any => {\n const out: any = Array.isArray(a) ? [...a] : {...a};\n for (const k of Object.keys(b ?? {})) {\n const bv = (b as any)[k];\n out[k] =\n bv && typeof bv === \"object\" && !Array.isArray(bv)\n ? deepMerge(out[k] ?? {}, bv)\n : bv;\n }\n return out;\n };\n reset(deepMerge(cur, patch), {\n keepErrors: true,\n keepDirty: true,\n keepTouched: true,\n keepSubmitCount: true,\n });\n };\n\n return {setValues, mergeReset};\n }\n\n const IRefReturn: IUseFormReturn<T> = useMemo(() => {\n return {\n id,\n setIsSubmitting,\n ...formMethods,\n ...createFormAppliers({\n setValue: formMethods.setValue,\n reset: formMethods.reset,\n getValues: formMethods.getValues,\n }),\n onFormSubmit: handleSubmit,\n }\n }, [handleSubmit, formMethods, setIsSubmitting, id])\n useImperativeHandle(ref, () => {\n return IRefReturn;\n }, [formState]);\n\n\n\n return (\n // Pass ONLY the original, unmodified formMethods to the provider. This fixes the error.\n <FormProvider {...formMethods}>\n <Flex\n id={id}\n w={\"full\"}\n gap={10}\n flexDirection={\"column\"}\n position={'relative'}\n entering={animation?.entering}\n exiting={animation?.exiting}\n animationDuration={animation?.animationDuration}\n animationDelay={animation?.animationDelay}\n {...(style || {})}>\n\n\n <FormRenderer\n elements={elements}\n control={control}\n grid={grid}\n getValues={getValues}\n focusedField={focusedField}\n setFocusedField={setFocusedField}\n />\n\n {typeof children === \"function\"\n ? children(IRefReturn)\n : children}\n\n {submitButtonProps != \"none\" && (\n <Flex justifyContent=\"flex-end\" w=\"full\">\n <SubmitButton\n submitButtonProps={submitButtonProps}\n formMethods={formMethods}\n isSubmitting={isSubmitting}\n handleSubmit={handleSubmit}\n />\n </Flex>\n )}\n </Flex>\n </FormProvider>\n );\n};\n\nexport default Form;\n"],"names":["getValues"],"mappings":"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"}
1
+ {"version":3,"file":"Form.js","sources":["../../../src/form-renderer/Form.tsx"],"sourcesContent":["// Form/Form.tsx\n\nimport React, {useEffect, useImperativeHandle, useMemo, useState} from 'react';\nimport {\n type DeepPartial,\n type FieldValues,\n FormProvider,\n type UseFormReset,\n type UseFormSetValue\n} from 'react-hook-form';\nimport {useFormManager} from './hooks';\nimport type {IFormComponent, IUseFormReturn, SetManyOpts} from \"@lmb-it/kitsconcerto-types\";\nimport {SubmitButton} from \"./components/SubmitButton\";\nimport {FormRenderer} from \"./components/FormRenderer\";\nimport {Flex} from \"../_compat\";\n\nconst Form = <T extends FieldValues>({\n elements,\n onSubmit,\n onInvalidSubmit,\n outputFormat = 'Json',\n id = \"go-markets-form\",\n grid, rowGap, onChangeSingleValue,\n onChange,\n submitButtonProps,\n onMount,\n ref,\n children,\n animation,\n style\n }: IFormComponent<T>) => {\n\n const [isSubmitting, setIsSubmitting] = useState(false);\n\n // Destructure the new, corrected return shape from the hook\n const {formMethods, handleSubmit} = useFormManager({\n elements,\n onSubmit,\n onInvalidSubmit,\n outputFormat,\n onChangeSingleValue,\n onChange, id\n }, isSubmitting, setIsSubmitting);\n\n const [focusedField, setFocusedField] = useState<string>('');\n // Destructure the specific methods we need for the renderer from the original formMethods\n const {getValues, control, formState} = formMethods;\n\n useEffect(() => {\n onMount && onMount(formMethods)\n }, []);\n\n /** Factory. Feed setValue/reset from your useFormManager. */\n function createFormAppliers<T extends FieldValues>(deps: {\n setValue: UseFormSetValue<T>;\n reset?: UseFormReset<T>;\n getValues?: () => T;\n }) {\n const {setValue, reset, getValues} = deps;\n\n /** Patch many fields (deep paths supported). */\n const setValues = (patch: DeepPartial<T>, opts: SetManyOpts = {shouldDirty: true}) => {\n const walk = (base: string, v: unknown) => {\n if (v !== null && typeof v === \"object\" && !Array.isArray(v)) {\n for (const [k, vv] of Object.entries(v as Record<string, unknown>)) {\n walk(base ? `${base}.${k}` : k, vv);\n }\n } else {\n setValue(base as any, v as any, opts);\n }\n };\n walk(\"\", patch as any);\n };\n\n /** Merge patch into current values using reset (fast for large updates). */\n const mergeReset = (patch: DeepPartial<T>) => {\n if (!reset || !getValues) return;\n const cur = getValues();\n const deepMerge = (a: any, b: any): any => {\n const out: any = Array.isArray(a) ? [...a] : {...a};\n for (const k of Object.keys(b ?? {})) {\n const bv = (b as any)[k];\n out[k] =\n bv && typeof bv === \"object\" && !Array.isArray(bv)\n ? deepMerge(out[k] ?? {}, bv)\n : bv;\n }\n return out;\n };\n reset(deepMerge(cur, patch), {\n keepErrors: true,\n keepDirty: true,\n keepTouched: true,\n keepSubmitCount: true,\n });\n };\n\n return {setValues, mergeReset};\n }\n\n const IRefReturn: IUseFormReturn<T> = useMemo(() => {\n return {\n id,\n setIsSubmitting,\n ...formMethods,\n ...createFormAppliers({\n setValue: formMethods.setValue,\n reset: formMethods.reset,\n getValues: formMethods.getValues,\n }),\n onFormSubmit: handleSubmit,\n }\n }, [handleSubmit, formMethods, setIsSubmitting, id])\n useImperativeHandle(ref, () => {\n return IRefReturn;\n }, [formState]);\n\n\n\n return (\n // Pass ONLY the original, unmodified formMethods to the provider. This fixes the error.\n <FormProvider {...formMethods}>\n <Flex\n id={id}\n w={\"full\"}\n gap={10}\n flexDirection={\"column\"}\n position={'relative'}\n entering={animation?.entering}\n exiting={animation?.exiting}\n animationDuration={animation?.animationDuration}\n animationDelay={animation?.animationDelay}\n {...(style || {})}>\n\n\n <FormRenderer\n elements={elements}\n control={control}\n grid={grid}\n rowGap={rowGap}\n getValues={getValues}\n focusedField={focusedField}\n setFocusedField={setFocusedField}\n />\n\n {typeof children === \"function\"\n ? children(IRefReturn)\n : children}\n\n {submitButtonProps != \"none\" && (\n <Flex justifyContent=\"flex-end\" w=\"full\">\n <SubmitButton\n submitButtonProps={submitButtonProps}\n formMethods={formMethods}\n isSubmitting={isSubmitting}\n handleSubmit={handleSubmit}\n />\n </Flex>\n )}\n </Flex>\n </FormProvider>\n );\n};\n\nexport default Form;\n"],"names":["getValues"],"mappings":"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"}
package/form-renderer/components/FormRenderer/index.cjs CHANGED
@@ -25,12 +25,14 @@ var index = require('../fields/Combined/index.cjs');
25
25
  var KitsGrid = require('../../../layout/Grid/native/KitsGrid.cjs');
26
26
  var KitsGridItem = require('../../../layout/GridItem/native/KitsGridItem.cjs');
27
27
 
28
+ const DEFAULT_ROW_GAP = 6;
28
29
  const FormRenderer = ({
29
30
  elements,
30
31
  control,
31
32
  getValues,
32
33
  groupField,
33
34
  grid = {},
35
+ rowGap = DEFAULT_ROW_GAP,
34
36
  parentPath = "",
35
37
  focusedField,
36
38
  setFocusedField
@@ -98,7 +100,7 @@ const FormRenderer = ({
98
100
  KitsGrid.default,
99
101
  {
100
102
  columns: 12,
101
- rowGap: 6,
103
+ rowGap,
102
104
  columnGap: 8,
103
105
  children: elements.map((element) => {
104
106
  const FieldComponent = getElement(element.type);
package/form-renderer/components/FormRenderer/index.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","sources":["../../../../../src/form-renderer/components/FormRenderer/index.native.tsx"],"sourcesContent":["// components/FormRenderer.tsx\n\nimport React, {useCallback, useEffect, useMemo, useState} from 'react';\nimport type {Control, FieldValues, UseFormGetValues} from 'react-hook-form';\nimport type {GroupFieldConfigs, IFormElement} from '@lmb-it/kitsconcerto-types';\nimport {FieldWrapper} from '../layout/FieldWrapper';\nimport {KeyboardNavContext, useKeyboardNavProvider} from '../../../hooks/useKeyboardNavigation';\n\n// Import all your \"dumb\" field components\nimport {\n Checkboxes,\n ColorPicker,\n CombinedElement,\n ContainerElement,\n DateField,\n FileUploader,\n Group,\n InputNumber,\n InputText,\n ListBox,\n Location,\n NormalSelect,\n ObjectElement,\n Password,\n Phone,\n RadiusPicker,\n Radios,\n Select,\n Switch,\n TagsSelect,\n Textarea,\n TreeSelect\n} from '../fields';\nimport {Grid, GridItem} from \"../../../_compat\";\nimport type {IStyleClasses} from \"@lmb-it/kitsconcerto-types\";\n\n// ... import all other field components\n\ninterface FormRendererProps<T extends FieldValues> extends GroupFieldConfigs<T> {\n elements: IFormElement<T>[];\n control: Control<T>;\n getValues: UseFormGetValues<T>;\n parentPath?: string; // ✨ Pass down the parent path for nesting\n grid?: IStyleClasses;\n focusedField?: string;\n setFocusedField: React.Dispatch<React.SetStateAction<string>>;\n}\n\nexport const FormRenderer = <T extends FieldValues>({\n elements,\n control,\n getValues,\n groupField,\n grid = {},\n parentPath = '',\n focusedField, setFocusedField\n }: FormRendererProps<T>) => {\n\n const [gridItemProps, setGridItemProps] = useState<Record<string, string>>({})\n\n // --- Keyboard navigation ---\n const TEXT_TYPES = ['Text', 'Email', 'Number', 'Password', 'Phone', 'Textarea'];\n const textFieldIds = useMemo(() => {\n return elements\n .filter((el) => TEXT_TYPES.includes(el.type))\n .map((el) => `${parentPath}${el.id as string}`);\n }, [elements, parentPath]);\n\n const keyboardNavCtx = useKeyboardNavProvider();\n\n useEffect(() => {\n keyboardNavCtx.setElementsOrder(textFieldIds);\n }, [textFieldIds]);\n\n const getElement = useCallback((elementType: string) => {\n\n switch (elementType) {\n\n case 'Email':\n case 'Text':\n return InputText;\n case 'Number':\n return InputNumber;\n case 'Password':\n return Password;\n case 'Location':\n return Location;\n case 'Phone':\n return Phone\n case 'Date':\n return DateField\n case 'ColorPicker':\n return ColorPicker\n case 'RadiusPicker':\n return RadiusPicker\n case 'Radios':\n return Radios\n case 'Textarea':\n return Textarea\n case 'Image':\n case 'File':\n return FileUploader\n case 'Switch':\n return Switch\n case 'Checkbox':\n return Checkboxes\n case 'Select':\n return NormalSelect\n case 'TreeSelect':\n return TreeSelect\n case 'Tags':\n return TagsSelect\n case 'ListBox':\n return ListBox\n case 'Multiselect':\n return Select\n case 'Group':\n return Group\n case 'Object':\n return ObjectElement\n case 'Container':\n return ContainerElement\n case 'Combined':\n return CombinedElement\n // default:\n // return <Flex/>;\n }\n }, []);\n\n\n return (\n <KeyboardNavContext.Provider value={keyboardNavCtx}>\n <Grid\n columns={12}\n rowGap={6}\n columnGap={8}\n >\n {elements.map((element) => {\n\n const FieldComponent = getElement(element.type);\n\n const elementId = `${parentPath}${element.id as string}`;\n const resolvedElement = elementId !== element.id ? { ...element, id: elementId } : element;\n\n\n if (!FieldComponent) {\n console.warn(`No component found for element type: \"${resolvedElement.type}\"`);\n return null;\n }\n\n const colSpan = parseInt(gridItemProps[elementId] ?? '12', 10);\n\n return (\n <GridItem\n key={elementId}\n id={elementId}\n colSpan={colSpan}\n /* The cell's own style — the stacking level an\n element config cannot otherwise reach. Sizing keys\n are forbidden by the type. */\n style={(resolvedElement as any).cellStyle}\n >\n <FieldWrapper\n key={elementId}\n element={resolvedElement}\n control={control}\n grid={grid}\n groupField={groupField}\n getValues={getValues}\n focusedField={focusedField}\n setFocusedField={setFocusedField}\n onGridChange={(value) => {\n if (value != gridItemProps[elementId]) {\n setGridItemProps(prevState => ({\n ...prevState,\n [elementId]: value\n }));\n }\n }}\n\n\n >\n {(props) => <FieldComponent\n groupField={groupField}\n element={resolvedElement}\n control={control}\n getValues={getValues}\n focusedField={focusedField}\n setFocusedField={setFocusedField}\n fieldLogic={props}\n\n />}\n </FieldWrapper>\n </GridItem>\n );\n })}\n </Grid>\n </KeyboardNavContext.Provider>\n );\n};\n"],"names":["useState","useMemo","useKeyboardNavProvider","useEffect","useCallback","InputText","InputNumber","Password","Location","Phone","DateField","ColorPicker","RadiusPicker","Radios","Textarea","FileUploader","Switch","Checkboxes","NormalSelect","TreeSelect","TagsSelect","ListBox","Select","Group","ObjectElement","ContainerElement","CombinedElement","jsx","KeyboardNavContext","Grid","GridItem","FieldWrapper"],"mappings":"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"}
1
+ {"version":3,"file":"index.cjs","sources":["../../../../../src/form-renderer/components/FormRenderer/index.native.tsx"],"sourcesContent":["// components/FormRenderer.tsx\n\nimport React, {useCallback, useEffect, useMemo, useState} from 'react';\nimport type {Control, FieldValues, UseFormGetValues} from 'react-hook-form';\nimport type {GroupFieldConfigs, IFormElement} from '@lmb-it/kitsconcerto-types';\nimport {FieldWrapper} from '../layout/FieldWrapper';\nimport {KeyboardNavContext, useKeyboardNavProvider} from '../../../hooks/useKeyboardNavigation';\n\n// Import all your \"dumb\" field components\nimport {\n Checkboxes,\n ColorPicker,\n CombinedElement,\n ContainerElement,\n DateField,\n FileUploader,\n Group,\n InputNumber,\n InputText,\n ListBox,\n Location,\n NormalSelect,\n ObjectElement,\n Password,\n Phone,\n RadiusPicker,\n Radios,\n Select,\n Switch,\n TagsSelect,\n Textarea,\n TreeSelect\n} from '../fields';\nimport {Grid, GridItem} from \"../../../_compat\";\nimport type {IStyleClasses} from \"@lmb-it/kitsconcerto-types\";\n\n// ... import all other field components\n\n/**\n * ⛔ THE NUMBER THIS RENDERER HAS ALWAYS USED. It is named rather than written\n * twice so the default and the documentation cannot drift apart; a caller that\n * passes no `rowGap` gets exactly what it got before this prop existed.\n */\nconst DEFAULT_ROW_GAP = 6;\n\ninterface FormRendererProps<T extends FieldValues> extends GroupFieldConfigs<T> {\n elements: IFormElement<T>[];\n control: Control<T>;\n getValues: UseFormGetValues<T>;\n parentPath?: string; // ✨ Pass down the parent path for nesting\n grid?: IStyleClasses;\n /**\n * Vertical space between rows, in points. Omitted, the 6 this renderer has\n * always used — see `IFormComponent.rowGap` for why it is a named prop and\n * not the existing `grid` bag.\n */\n rowGap?: number;\n focusedField?: string;\n setFocusedField: React.Dispatch<React.SetStateAction<string>>;\n}\n\nexport const FormRenderer = <T extends FieldValues>({\n elements,\n control,\n getValues,\n groupField,\n grid = {},\n rowGap = DEFAULT_ROW_GAP,\n parentPath = '',\n focusedField, setFocusedField\n }: FormRendererProps<T>) => {\n\n const [gridItemProps, setGridItemProps] = useState<Record<string, string>>({})\n\n // --- Keyboard navigation ---\n const TEXT_TYPES = ['Text', 'Email', 'Number', 'Password', 'Phone', 'Textarea'];\n const textFieldIds = useMemo(() => {\n return elements\n .filter((el) => TEXT_TYPES.includes(el.type))\n .map((el) => `${parentPath}${el.id as string}`);\n }, [elements, parentPath]);\n\n const keyboardNavCtx = useKeyboardNavProvider();\n\n useEffect(() => {\n keyboardNavCtx.setElementsOrder(textFieldIds);\n }, [textFieldIds]);\n\n const getElement = useCallback((elementType: string) => {\n\n switch (elementType) {\n\n case 'Email':\n case 'Text':\n return InputText;\n case 'Number':\n return InputNumber;\n case 'Password':\n return Password;\n case 'Location':\n return Location;\n case 'Phone':\n return Phone\n case 'Date':\n return DateField\n case 'ColorPicker':\n return ColorPicker\n case 'RadiusPicker':\n return RadiusPicker\n case 'Radios':\n return Radios\n case 'Textarea':\n return Textarea\n case 'Image':\n case 'File':\n return FileUploader\n case 'Switch':\n return Switch\n case 'Checkbox':\n return Checkboxes\n case 'Select':\n return NormalSelect\n case 'TreeSelect':\n return TreeSelect\n case 'Tags':\n return TagsSelect\n case 'ListBox':\n return ListBox\n case 'Multiselect':\n return Select\n case 'Group':\n return Group\n case 'Object':\n return ObjectElement\n case 'Container':\n return ContainerElement\n case 'Combined':\n return CombinedElement\n // default:\n // return <Flex/>;\n }\n }, []);\n\n\n return (\n <KeyboardNavContext.Provider value={keyboardNavCtx}>\n <Grid\n columns={12}\n rowGap={rowGap}\n columnGap={8}\n >\n {elements.map((element) => {\n\n const FieldComponent = getElement(element.type);\n\n const elementId = `${parentPath}${element.id as string}`;\n const resolvedElement = elementId !== element.id ? { ...element, id: elementId } : element;\n\n\n if (!FieldComponent) {\n console.warn(`No component found for element type: \"${resolvedElement.type}\"`);\n return null;\n }\n\n const colSpan = parseInt(gridItemProps[elementId] ?? '12', 10);\n\n return (\n <GridItem\n key={elementId}\n id={elementId}\n colSpan={colSpan}\n /* The cell's own style — the stacking level an\n element config cannot otherwise reach. Sizing keys\n are forbidden by the type. */\n style={(resolvedElement as any).cellStyle}\n >\n <FieldWrapper\n key={elementId}\n element={resolvedElement}\n control={control}\n grid={grid}\n groupField={groupField}\n getValues={getValues}\n focusedField={focusedField}\n setFocusedField={setFocusedField}\n onGridChange={(value) => {\n if (value != gridItemProps[elementId]) {\n setGridItemProps(prevState => ({\n ...prevState,\n [elementId]: value\n }));\n }\n }}\n\n\n >\n {(props) => <FieldComponent\n groupField={groupField}\n element={resolvedElement}\n control={control}\n getValues={getValues}\n focusedField={focusedField}\n setFocusedField={setFocusedField}\n fieldLogic={props}\n\n />}\n </FieldWrapper>\n </GridItem>\n );\n })}\n </Grid>\n </KeyboardNavContext.Provider>\n );\n};\n"],"names":["useState","useMemo","useKeyboardNavProvider","useEffect","useCallback","InputText","InputNumber","Password","Location","Phone","DateField","ColorPicker","RadiusPicker","Radios","Textarea","FileUploader","Switch","Checkboxes","NormalSelect","TreeSelect","TagsSelect","ListBox","Select","Group","ObjectElement","ContainerElement","CombinedElement","jsx","KeyboardNavContext","Grid","GridItem","FieldWrapper"],"mappings":"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"}
package/form-renderer/components/FormRenderer/index.js CHANGED
@@ -23,12 +23,14 @@ import { CombinedElement } from '../fields/Combined/index.js';
23
23
  import KitsGrid from '../../../layout/Grid/native/KitsGrid.js';
24
24
  import KitsGridItem from '../../../layout/GridItem/native/KitsGridItem.js';
25
25
 
26
+ const DEFAULT_ROW_GAP = 6;
26
27
  const FormRenderer = ({
27
28
  elements,
28
29
  control,
29
30
  getValues,
30
31
  groupField,
31
32
  grid = {},
33
+ rowGap = DEFAULT_ROW_GAP,
32
34
  parentPath = "",
33
35
  focusedField,
34
36
  setFocusedField
@@ -96,7 +98,7 @@ const FormRenderer = ({
96
98
  KitsGrid,
97
99
  {
98
100
  columns: 12,
99
- rowGap: 6,
101
+ rowGap,
100
102
  columnGap: 8,
101
103
  children: elements.map((element) => {
102
104
  const FieldComponent = getElement(element.type);
package/form-renderer/components/FormRenderer/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../../../../src/form-renderer/components/FormRenderer/index.native.tsx"],"sourcesContent":["// components/FormRenderer.tsx\n\nimport React, {useCallback, useEffect, useMemo, useState} from 'react';\nimport type {Control, FieldValues, UseFormGetValues} from 'react-hook-form';\nimport type {GroupFieldConfigs, IFormElement} from '@lmb-it/kitsconcerto-types';\nimport {FieldWrapper} from '../layout/FieldWrapper';\nimport {KeyboardNavContext, useKeyboardNavProvider} from '../../../hooks/useKeyboardNavigation';\n\n// Import all your \"dumb\" field components\nimport {\n Checkboxes,\n ColorPicker,\n CombinedElement,\n ContainerElement,\n DateField,\n FileUploader,\n Group,\n InputNumber,\n InputText,\n ListBox,\n Location,\n NormalSelect,\n ObjectElement,\n Password,\n Phone,\n RadiusPicker,\n Radios,\n Select,\n Switch,\n TagsSelect,\n Textarea,\n TreeSelect\n} from '../fields';\nimport {Grid, GridItem} from \"../../../_compat\";\nimport type {IStyleClasses} from \"@lmb-it/kitsconcerto-types\";\n\n// ... import all other field components\n\ninterface FormRendererProps<T extends FieldValues> extends GroupFieldConfigs<T> {\n elements: IFormElement<T>[];\n control: Control<T>;\n getValues: UseFormGetValues<T>;\n parentPath?: string; // ✨ Pass down the parent path for nesting\n grid?: IStyleClasses;\n focusedField?: string;\n setFocusedField: React.Dispatch<React.SetStateAction<string>>;\n}\n\nexport const FormRenderer = <T extends FieldValues>({\n elements,\n control,\n getValues,\n groupField,\n grid = {},\n parentPath = '',\n focusedField, setFocusedField\n }: FormRendererProps<T>) => {\n\n const [gridItemProps, setGridItemProps] = useState<Record<string, string>>({})\n\n // --- Keyboard navigation ---\n const TEXT_TYPES = ['Text', 'Email', 'Number', 'Password', 'Phone', 'Textarea'];\n const textFieldIds = useMemo(() => {\n return elements\n .filter((el) => TEXT_TYPES.includes(el.type))\n .map((el) => `${parentPath}${el.id as string}`);\n }, [elements, parentPath]);\n\n const keyboardNavCtx = useKeyboardNavProvider();\n\n useEffect(() => {\n keyboardNavCtx.setElementsOrder(textFieldIds);\n }, [textFieldIds]);\n\n const getElement = useCallback((elementType: string) => {\n\n switch (elementType) {\n\n case 'Email':\n case 'Text':\n return InputText;\n case 'Number':\n return InputNumber;\n case 'Password':\n return Password;\n case 'Location':\n return Location;\n case 'Phone':\n return Phone\n case 'Date':\n return DateField\n case 'ColorPicker':\n return ColorPicker\n case 'RadiusPicker':\n return RadiusPicker\n case 'Radios':\n return Radios\n case 'Textarea':\n return Textarea\n case 'Image':\n case 'File':\n return FileUploader\n case 'Switch':\n return Switch\n case 'Checkbox':\n return Checkboxes\n case 'Select':\n return NormalSelect\n case 'TreeSelect':\n return TreeSelect\n case 'Tags':\n return TagsSelect\n case 'ListBox':\n return ListBox\n case 'Multiselect':\n return Select\n case 'Group':\n return Group\n case 'Object':\n return ObjectElement\n case 'Container':\n return ContainerElement\n case 'Combined':\n return CombinedElement\n // default:\n // return <Flex/>;\n }\n }, []);\n\n\n return (\n <KeyboardNavContext.Provider value={keyboardNavCtx}>\n <Grid\n columns={12}\n rowGap={6}\n columnGap={8}\n >\n {elements.map((element) => {\n\n const FieldComponent = getElement(element.type);\n\n const elementId = `${parentPath}${element.id as string}`;\n const resolvedElement = elementId !== element.id ? { ...element, id: elementId } : element;\n\n\n if (!FieldComponent) {\n console.warn(`No component found for element type: \"${resolvedElement.type}\"`);\n return null;\n }\n\n const colSpan = parseInt(gridItemProps[elementId] ?? '12', 10);\n\n return (\n <GridItem\n key={elementId}\n id={elementId}\n colSpan={colSpan}\n /* The cell's own style — the stacking level an\n element config cannot otherwise reach. Sizing keys\n are forbidden by the type. */\n style={(resolvedElement as any).cellStyle}\n >\n <FieldWrapper\n key={elementId}\n element={resolvedElement}\n control={control}\n grid={grid}\n groupField={groupField}\n getValues={getValues}\n focusedField={focusedField}\n setFocusedField={setFocusedField}\n onGridChange={(value) => {\n if (value != gridItemProps[elementId]) {\n setGridItemProps(prevState => ({\n ...prevState,\n [elementId]: value\n }));\n }\n }}\n\n\n >\n {(props) => <FieldComponent\n groupField={groupField}\n element={resolvedElement}\n control={control}\n getValues={getValues}\n focusedField={focusedField}\n setFocusedField={setFocusedField}\n fieldLogic={props}\n\n />}\n </FieldWrapper>\n </GridItem>\n );\n })}\n </Grid>\n </KeyboardNavContext.Provider>\n );\n};\n"],"names":["NormalSelect","TreeSelect","TagsSelect","ListBox","ContainerElement","Grid","GridItem"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sources":["../../../../../src/form-renderer/components/FormRenderer/index.native.tsx"],"sourcesContent":["// components/FormRenderer.tsx\n\nimport React, {useCallback, useEffect, useMemo, useState} from 'react';\nimport type {Control, FieldValues, UseFormGetValues} from 'react-hook-form';\nimport type {GroupFieldConfigs, IFormElement} from '@lmb-it/kitsconcerto-types';\nimport {FieldWrapper} from '../layout/FieldWrapper';\nimport {KeyboardNavContext, useKeyboardNavProvider} from '../../../hooks/useKeyboardNavigation';\n\n// Import all your \"dumb\" field components\nimport {\n Checkboxes,\n ColorPicker,\n CombinedElement,\n ContainerElement,\n DateField,\n FileUploader,\n Group,\n InputNumber,\n InputText,\n ListBox,\n Location,\n NormalSelect,\n ObjectElement,\n Password,\n Phone,\n RadiusPicker,\n Radios,\n Select,\n Switch,\n TagsSelect,\n Textarea,\n TreeSelect\n} from '../fields';\nimport {Grid, GridItem} from \"../../../_compat\";\nimport type {IStyleClasses} from \"@lmb-it/kitsconcerto-types\";\n\n// ... import all other field components\n\n/**\n * ⛔ THE NUMBER THIS RENDERER HAS ALWAYS USED. It is named rather than written\n * twice so the default and the documentation cannot drift apart; a caller that\n * passes no `rowGap` gets exactly what it got before this prop existed.\n */\nconst DEFAULT_ROW_GAP = 6;\n\ninterface FormRendererProps<T extends FieldValues> extends GroupFieldConfigs<T> {\n elements: IFormElement<T>[];\n control: Control<T>;\n getValues: UseFormGetValues<T>;\n parentPath?: string; // ✨ Pass down the parent path for nesting\n grid?: IStyleClasses;\n /**\n * Vertical space between rows, in points. Omitted, the 6 this renderer has\n * always used — see `IFormComponent.rowGap` for why it is a named prop and\n * not the existing `grid` bag.\n */\n rowGap?: number;\n focusedField?: string;\n setFocusedField: React.Dispatch<React.SetStateAction<string>>;\n}\n\nexport const FormRenderer = <T extends FieldValues>({\n elements,\n control,\n getValues,\n groupField,\n grid = {},\n rowGap = DEFAULT_ROW_GAP,\n parentPath = '',\n focusedField, setFocusedField\n }: FormRendererProps<T>) => {\n\n const [gridItemProps, setGridItemProps] = useState<Record<string, string>>({})\n\n // --- Keyboard navigation ---\n const TEXT_TYPES = ['Text', 'Email', 'Number', 'Password', 'Phone', 'Textarea'];\n const textFieldIds = useMemo(() => {\n return elements\n .filter((el) => TEXT_TYPES.includes(el.type))\n .map((el) => `${parentPath}${el.id as string}`);\n }, [elements, parentPath]);\n\n const keyboardNavCtx = useKeyboardNavProvider();\n\n useEffect(() => {\n keyboardNavCtx.setElementsOrder(textFieldIds);\n }, [textFieldIds]);\n\n const getElement = useCallback((elementType: string) => {\n\n switch (elementType) {\n\n case 'Email':\n case 'Text':\n return InputText;\n case 'Number':\n return InputNumber;\n case 'Password':\n return Password;\n case 'Location':\n return Location;\n case 'Phone':\n return Phone\n case 'Date':\n return DateField\n case 'ColorPicker':\n return ColorPicker\n case 'RadiusPicker':\n return RadiusPicker\n case 'Radios':\n return Radios\n case 'Textarea':\n return Textarea\n case 'Image':\n case 'File':\n return FileUploader\n case 'Switch':\n return Switch\n case 'Checkbox':\n return Checkboxes\n case 'Select':\n return NormalSelect\n case 'TreeSelect':\n return TreeSelect\n case 'Tags':\n return TagsSelect\n case 'ListBox':\n return ListBox\n case 'Multiselect':\n return Select\n case 'Group':\n return Group\n case 'Object':\n return ObjectElement\n case 'Container':\n return ContainerElement\n case 'Combined':\n return CombinedElement\n // default:\n // return <Flex/>;\n }\n }, []);\n\n\n return (\n <KeyboardNavContext.Provider value={keyboardNavCtx}>\n <Grid\n columns={12}\n rowGap={rowGap}\n columnGap={8}\n >\n {elements.map((element) => {\n\n const FieldComponent = getElement(element.type);\n\n const elementId = `${parentPath}${element.id as string}`;\n const resolvedElement = elementId !== element.id ? { ...element, id: elementId } : element;\n\n\n if (!FieldComponent) {\n console.warn(`No component found for element type: \"${resolvedElement.type}\"`);\n return null;\n }\n\n const colSpan = parseInt(gridItemProps[elementId] ?? '12', 10);\n\n return (\n <GridItem\n key={elementId}\n id={elementId}\n colSpan={colSpan}\n /* The cell's own style — the stacking level an\n element config cannot otherwise reach. Sizing keys\n are forbidden by the type. */\n style={(resolvedElement as any).cellStyle}\n >\n <FieldWrapper\n key={elementId}\n element={resolvedElement}\n control={control}\n grid={grid}\n groupField={groupField}\n getValues={getValues}\n focusedField={focusedField}\n setFocusedField={setFocusedField}\n onGridChange={(value) => {\n if (value != gridItemProps[elementId]) {\n setGridItemProps(prevState => ({\n ...prevState,\n [elementId]: value\n }));\n }\n }}\n\n\n >\n {(props) => <FieldComponent\n groupField={groupField}\n element={resolvedElement}\n control={control}\n getValues={getValues}\n focusedField={focusedField}\n setFocusedField={setFocusedField}\n fieldLogic={props}\n\n />}\n </FieldWrapper>\n </GridItem>\n );\n })}\n </Grid>\n </KeyboardNavContext.Provider>\n );\n};\n"],"names":["NormalSelect","TreeSelect","TagsSelect","ListBox","ContainerElement","Grid","GridItem"],"mappings":"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"}
package/index.d.ts CHANGED
@@ -2092,6 +2092,29 @@ export type IFormComponent<T extends FieldValues> = UseFormManagerEvents<T> & (I
2092
2092
  animation?: IKitsAnimation;
2093
2093
  /** CSS style props applied to the form's outer Flex wrapper. */
2094
2094
  style?: IStyleClasses;
2095
+ /**
2096
+ * Vertical space between the form's rows, in points.
2097
+ *
2098
+ * ⛔ OMITTED MEANS TODAY'S VALUE, AND THAT IS THE WHOLE CONTRACT. The two
2099
+ * renderers have always hard-coded their own number — 6 on native, 10 on
2100
+ * web — and every form in every repo was built against it. This prop is a
2101
+ * way to ask for a different one; it is not a new default. A caller that
2102
+ * does not pass it renders byte for byte as it did before.
2103
+ *
2104
+ * ⚠️ IT IS NOT `grid`. The web renderer already spreads `grid` onto its
2105
+ * `<Grid>` and the native one accepts the same prop and ignores it, so
2106
+ * making native spread it too would have been the smaller diff — and it
2107
+ * would have changed behaviour for callers who never opted in. Two element
2108
+ * configs in the AlphaMatch App already pass `grid: {columns: 12,
2109
+ * columnGap: 4}`, which web honours and native drops; spreading would have
2110
+ * moved the native column gap from 8 to 4 on those forms. A named prop
2111
+ * cannot do that to anyone.
2112
+ *
2113
+ * ⚠️ ROW ONLY, DELIBERATELY. `columnGap` is the same shape of change and is
2114
+ * not in this one, because nothing has asked for it. Adding a lever nobody
2115
+ * pulls is a second thing to keep working.
2116
+ */
2117
+ rowGap?: number;
2095
2118
  };
2096
2119
  export interface UseFieldLogicElementProps<T extends FieldValues> extends GroupFieldConfigs<T> {
2097
2120
  element: IFormElement<T>;
@@ -8868,7 +8891,7 @@ declare const FilePicker: FC<IFileUploader>;
8868
8891
 
8869
8892
  declare const Label: FunctionComponent<ILabelProps>;
8870
8893
 
8871
- declare const Form: <T extends FieldValues>({ elements, onSubmit, onInvalidSubmit, outputFormat, id, grid, onChangeSingleValue, onChange, submitButtonProps, onMount, ref, children, animation, style }: IFormComponent<T>) => React__default.JSX.Element;
8894
+ declare const Form: <T extends FieldValues>({ elements, onSubmit, onInvalidSubmit, outputFormat, id, grid, rowGap, onChangeSingleValue, onChange, submitButtonProps, onMount, ref, children, animation, style }: IFormComponent<T>) => React__default.JSX.Element;
8872
8895
 
8873
8896
  /**
8874
8897
  * The core logic engine for an individual form field.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lmb-it/kitsconcerto-native",
3
- "version": "0.1.270",
3
+ "version": "0.1.271",
4
4
  "description": "KitsConcerto — Native (React Native) UI components",
5
5
  "main": "index.cjs",
6
6
  "module": "index.js",