@lmb-it/kitsconcerto-native 0.1.268 → 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.
- package/form-renderer/Form.cjs +2 -0
- package/form-renderer/Form.cjs.map +1 -1
- package/form-renderer/Form.js +2 -0
- package/form-renderer/Form.js.map +1 -1
- package/form-renderer/components/FormRenderer/index.cjs +35 -24
- package/form-renderer/components/FormRenderer/index.cjs.map +1 -1
- package/form-renderer/components/FormRenderer/index.js +35 -24
- package/form-renderer/components/FormRenderer/index.js.map +1 -1
- package/index.d.ts +96 -3
- package/layout/GridItem/native/KitsGridItem.cjs +10 -2
- package/layout/GridItem/native/KitsGridItem.cjs.map +1 -1
- package/layout/GridItem/native/KitsGridItem.js +10 -2
- package/layout/GridItem/native/KitsGridItem.js.map +1 -1
- 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
|
|
@@ -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":";;;;;;;;;;;;;;AAgBA,MAAM,OAAO,CAAwB;AAAA,EACI,QAAA;AAAA,EACA,QAAA;AAAA,EACA,eAAA;AAAA,EACA,YAAA,GAAe,MAAA;AAAA,EACf,EAAA,GAAK,iBAAA;AAAA,EACL,IAAA;AAAA,EAAM,mBAAA;AAAA,
|
|
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
|
|
@@ -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":";;;;;;;;;;AAgBA,MAAM,OAAO,CAAwB;AAAA,EACI,QAAA;AAAA,EACA,QAAA;AAAA,EACA,eAAA;AAAA,EACA,YAAA,GAAe,MAAA;AAAA,EACf,EAAA,GAAK,iBAAA;AAAA,EACL,IAAA;AAAA,EAAM,mBAAA;AAAA,
|
|
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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"}
|
|
@@ -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
|
|
103
|
+
rowGap,
|
|
102
104
|
columnGap: 8,
|
|
103
105
|
children: elements.map((element) => {
|
|
104
106
|
const FieldComponent = getElement(element.type);
|
|
@@ -109,39 +111,48 @@ const FormRenderer = ({
|
|
|
109
111
|
return null;
|
|
110
112
|
}
|
|
111
113
|
const colSpan = parseInt(gridItemProps[elementId] ?? "12", 10);
|
|
112
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
113
|
-
|
|
114
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
115
|
+
KitsGridItem.default,
|
|
114
116
|
{
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
focusedField,
|
|
121
|
-
setFocusedField,
|
|
122
|
-
onGridChange: (value) => {
|
|
123
|
-
if (value != gridItemProps[elementId]) {
|
|
124
|
-
setGridItemProps((prevState) => ({
|
|
125
|
-
...prevState,
|
|
126
|
-
[elementId]: value
|
|
127
|
-
}));
|
|
128
|
-
}
|
|
129
|
-
},
|
|
130
|
-
children: (props) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
131
|
-
FieldComponent,
|
|
117
|
+
id: elementId,
|
|
118
|
+
colSpan,
|
|
119
|
+
style: resolvedElement.cellStyle,
|
|
120
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
121
|
+
FieldWrapper_native.FieldWrapper,
|
|
132
122
|
{
|
|
133
|
-
groupField,
|
|
134
123
|
element: resolvedElement,
|
|
135
124
|
control,
|
|
125
|
+
grid,
|
|
126
|
+
groupField,
|
|
136
127
|
getValues,
|
|
137
128
|
focusedField,
|
|
138
129
|
setFocusedField,
|
|
139
|
-
|
|
140
|
-
|
|
130
|
+
onGridChange: (value) => {
|
|
131
|
+
if (value != gridItemProps[elementId]) {
|
|
132
|
+
setGridItemProps((prevState) => ({
|
|
133
|
+
...prevState,
|
|
134
|
+
[elementId]: value
|
|
135
|
+
}));
|
|
136
|
+
}
|
|
137
|
+
},
|
|
138
|
+
children: (props) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
139
|
+
FieldComponent,
|
|
140
|
+
{
|
|
141
|
+
groupField,
|
|
142
|
+
element: resolvedElement,
|
|
143
|
+
control,
|
|
144
|
+
getValues,
|
|
145
|
+
focusedField,
|
|
146
|
+
setFocusedField,
|
|
147
|
+
fieldLogic: props
|
|
148
|
+
}
|
|
149
|
+
)
|
|
150
|
+
},
|
|
151
|
+
elementId
|
|
141
152
|
)
|
|
142
153
|
},
|
|
143
154
|
elementId
|
|
144
|
-
)
|
|
155
|
+
);
|
|
145
156
|
})
|
|
146
157
|
}
|
|
147
158
|
) });
|
|
@@ -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 key={elementId} id={elementId} colSpan={colSpan}>\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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"}
|
|
@@ -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
|
|
101
|
+
rowGap,
|
|
100
102
|
columnGap: 8,
|
|
101
103
|
children: elements.map((element) => {
|
|
102
104
|
const FieldComponent = getElement(element.type);
|
|
@@ -107,39 +109,48 @@ const FormRenderer = ({
|
|
|
107
109
|
return null;
|
|
108
110
|
}
|
|
109
111
|
const colSpan = parseInt(gridItemProps[elementId] ?? "12", 10);
|
|
110
|
-
return /* @__PURE__ */ jsx(
|
|
111
|
-
|
|
112
|
+
return /* @__PURE__ */ jsx(
|
|
113
|
+
KitsGridItem,
|
|
112
114
|
{
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
focusedField,
|
|
119
|
-
setFocusedField,
|
|
120
|
-
onGridChange: (value) => {
|
|
121
|
-
if (value != gridItemProps[elementId]) {
|
|
122
|
-
setGridItemProps((prevState) => ({
|
|
123
|
-
...prevState,
|
|
124
|
-
[elementId]: value
|
|
125
|
-
}));
|
|
126
|
-
}
|
|
127
|
-
},
|
|
128
|
-
children: (props) => /* @__PURE__ */ jsx(
|
|
129
|
-
FieldComponent,
|
|
115
|
+
id: elementId,
|
|
116
|
+
colSpan,
|
|
117
|
+
style: resolvedElement.cellStyle,
|
|
118
|
+
children: /* @__PURE__ */ jsx(
|
|
119
|
+
FieldWrapper,
|
|
130
120
|
{
|
|
131
|
-
groupField,
|
|
132
121
|
element: resolvedElement,
|
|
133
122
|
control,
|
|
123
|
+
grid,
|
|
124
|
+
groupField,
|
|
134
125
|
getValues,
|
|
135
126
|
focusedField,
|
|
136
127
|
setFocusedField,
|
|
137
|
-
|
|
138
|
-
|
|
128
|
+
onGridChange: (value) => {
|
|
129
|
+
if (value != gridItemProps[elementId]) {
|
|
130
|
+
setGridItemProps((prevState) => ({
|
|
131
|
+
...prevState,
|
|
132
|
+
[elementId]: value
|
|
133
|
+
}));
|
|
134
|
+
}
|
|
135
|
+
},
|
|
136
|
+
children: (props) => /* @__PURE__ */ jsx(
|
|
137
|
+
FieldComponent,
|
|
138
|
+
{
|
|
139
|
+
groupField,
|
|
140
|
+
element: resolvedElement,
|
|
141
|
+
control,
|
|
142
|
+
getValues,
|
|
143
|
+
focusedField,
|
|
144
|
+
setFocusedField,
|
|
145
|
+
fieldLogic: props
|
|
146
|
+
}
|
|
147
|
+
)
|
|
148
|
+
},
|
|
149
|
+
elementId
|
|
139
150
|
)
|
|
140
151
|
},
|
|
141
152
|
elementId
|
|
142
|
-
)
|
|
153
|
+
);
|
|
143
154
|
})
|
|
144
155
|
}
|
|
145
156
|
) });
|
|
@@ -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 key={elementId} id={elementId} colSpan={colSpan}>\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
|
@@ -1622,6 +1622,22 @@ export type IElementStyle = {
|
|
|
1622
1622
|
helperText?: IStyleClasses;
|
|
1623
1623
|
errorMessage?: IStyleClasses;
|
|
1624
1624
|
};
|
|
1625
|
+
/**
|
|
1626
|
+
* The style a form grid CELL may carry, with every key that decides its size
|
|
1627
|
+
* removed.
|
|
1628
|
+
*
|
|
1629
|
+
* ⛔ THE GRID OWNS THE WIDTH. It measures its container, divides by `columns`,
|
|
1630
|
+
* and hands each cell an exact pixel width. A caller who sets `width`, `flex`
|
|
1631
|
+
* or `flexBasis` breaks that arithmetic for the whole ROW — flexbox then
|
|
1632
|
+
* redistributes space the neighbouring cells were counting on, and the symptom
|
|
1633
|
+
* appears on a SIBLING, nowhere near the line that caused it. Refusing them in
|
|
1634
|
+
* the type is the only place that mistake is cheap.
|
|
1635
|
+
*
|
|
1636
|
+
* ⚠️ The short aliases go too (`w`, `minW`, `maxW`): they are the same keys
|
|
1637
|
+
* under another name, and leaving them would make the ban look enforced while
|
|
1638
|
+
* a one-letter spelling walked straight through it.
|
|
1639
|
+
*/
|
|
1640
|
+
export type IGridCellStyle = Omit<IStyleClasses, 'width' | 'minWidth' | 'maxWidth' | 'w' | 'minW' | 'maxW' | 'flex' | 'flexBasis' | 'flexGrow' | 'flexShrink'>;
|
|
1625
1641
|
/** Core properties shared by all form elements. */
|
|
1626
1642
|
export interface IElementBase<T extends FieldValues> {
|
|
1627
1643
|
/** The unique identifier for the field. */
|
|
@@ -1665,6 +1681,30 @@ export interface IElementBase<T extends FieldValues> {
|
|
|
1665
1681
|
/** Grid layout properties. */
|
|
1666
1682
|
hideError?: boolean;
|
|
1667
1683
|
displayOnly?: boolean;
|
|
1684
|
+
/**
|
|
1685
|
+
* Style for the field's GRID CELL — the wrapper the form grid puts around
|
|
1686
|
+
* every element, outside the element's own `slots.container`.
|
|
1687
|
+
*
|
|
1688
|
+
* ⛔ THIS IS THE ONLY WAY TO REACH THAT LEVEL. A suggestion panel, a popover
|
|
1689
|
+
* or a menu that opens out of its own field is painted UNDER the fields
|
|
1690
|
+
* after it, because every cell sits at the default stacking level and the
|
|
1691
|
+
* later ones simply paint last. `slots.container`, the element's own
|
|
1692
|
+
* `zIndex` and the panel's own `zIndex` all order things INSIDE the cell,
|
|
1693
|
+
* one level too deep to matter.
|
|
1694
|
+
*
|
|
1695
|
+
* ⚠️ SIZING KEYS ARE REFUSED BY THE TYPE — `width`, `minWidth`, `maxWidth`,
|
|
1696
|
+
* `flex`, `flexBasis`, `flexGrow`, `flexShrink`. The grid hands each cell a
|
|
1697
|
+
* measured pixel width, and overriding it breaks the arithmetic for the
|
|
1698
|
+
* whole row, with the symptom appearing on a sibling.
|
|
1699
|
+
*
|
|
1700
|
+
* ⚠️ NOT THEME-RESOLVED. It is a plain React Native `ViewStyle`, applied
|
|
1701
|
+
* after the cell's width. A token string lands as a literal string, so use
|
|
1702
|
+
* it for `zIndex`, `elevation` and `overflow`, not for colours.
|
|
1703
|
+
*
|
|
1704
|
+
* ⚠️ NATIVE ONLY. On web the FieldWrapper owns the GridItem and already
|
|
1705
|
+
* spreads the element's container style onto it.
|
|
1706
|
+
*/
|
|
1707
|
+
cellStyle?: IGridCellStyle;
|
|
1668
1708
|
/** When true, the molecule component renders without its KitsContainer wrapper (no label, no error). */
|
|
1669
1709
|
attached?: boolean;
|
|
1670
1710
|
placeholder?: DynamicValue<T, string>;
|
|
@@ -2052,6 +2092,29 @@ export type IFormComponent<T extends FieldValues> = UseFormManagerEvents<T> & (I
|
|
|
2052
2092
|
animation?: IKitsAnimation;
|
|
2053
2093
|
/** CSS style props applied to the form's outer Flex wrapper. */
|
|
2054
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;
|
|
2055
2118
|
};
|
|
2056
2119
|
export interface UseFieldLogicElementProps<T extends FieldValues> extends GroupFieldConfigs<T> {
|
|
2057
2120
|
element: IFormElement<T>;
|
|
@@ -8283,11 +8346,41 @@ export interface IKitsGridProps {
|
|
|
8283
8346
|
*/
|
|
8284
8347
|
declare const KitsGrid: ({ columns, columnGap, rowGap, children, }: IKitsGridProps) => React__default.JSX.Element;
|
|
8285
8348
|
|
|
8349
|
+
/**
|
|
8350
|
+
* The style a grid cell may carry, with the keys that decide its SIZE removed.
|
|
8351
|
+
*
|
|
8352
|
+
* ⛔ `width`, `flex` AND `flexBasis` ARE FORBIDDEN BY THE TYPE, not merely
|
|
8353
|
+
* discouraged. The grid measures its container, divides by `columns`, and hands
|
|
8354
|
+
* every cell an exact pixel width. A caller who sets any of these breaks that
|
|
8355
|
+
* arithmetic for the whole ROW, because flexbox then redistributes space the
|
|
8356
|
+
* neighbouring cells were counting on — and the symptom shows up on a SIBLING,
|
|
8357
|
+
* nowhere near the line that caused it. A compile error is the only place that
|
|
8358
|
+
* mistake is cheap.
|
|
8359
|
+
*
|
|
8360
|
+
* ⚠️ `minWidth`, `maxWidth`, `flexGrow` and `flexShrink` go with them: each
|
|
8361
|
+
* overrides a measured width without looking like it does.
|
|
8362
|
+
*/
|
|
8363
|
+
export type IKitsGridItemStyle = Omit<ViewStyle, 'width' | 'minWidth' | 'maxWidth' | 'flex' | 'flexBasis' | 'flexGrow' | 'flexShrink'>;
|
|
8286
8364
|
export interface IKitsGridItemProps {
|
|
8287
8365
|
/** Unique identifier — used for context registration. Auto-generated if omitted. */
|
|
8288
8366
|
id?: string;
|
|
8289
8367
|
/** Number of grid columns this item spans */
|
|
8290
8368
|
colSpan: number;
|
|
8369
|
+
/**
|
|
8370
|
+
* Extra style for the cell, applied AFTER its measured width.
|
|
8371
|
+
*
|
|
8372
|
+
* ⛔ THIS IS THE STACKING LEVEL, AND NOTHING ELSE COULD REACH IT. Cells are
|
|
8373
|
+
* siblings inside one flex-wrap row, so a panel that opens out of its own
|
|
8374
|
+
* field — autocomplete suggestions, a popover, a menu — is painted UNDER
|
|
8375
|
+
* every cell that comes after it. A `zIndex` on anything INSIDE the cell
|
|
8376
|
+
* orders that thing within the cell and changes nothing outside it, and
|
|
8377
|
+
* `FieldWrapper`'s own `zIndex: isFocused ? 1000 : undefined` is inside it
|
|
8378
|
+
* too. Measured on a device: an address suggestion list drew its background,
|
|
8379
|
+
* and the next field's label and box drew on top of it.
|
|
8380
|
+
*
|
|
8381
|
+
* ⚠️ Sizing keys are removed by the type — see `IKitsGridItemStyle`.
|
|
8382
|
+
*/
|
|
8383
|
+
style?: IKitsGridItemStyle;
|
|
8291
8384
|
children?: ReactNode;
|
|
8292
8385
|
}
|
|
8293
8386
|
/**
|
|
@@ -8299,7 +8392,7 @@ export interface IKitsGridItemProps {
|
|
|
8299
8392
|
* Does NOT need to be a direct child of KitsGrid — context
|
|
8300
8393
|
* handles communication regardless of hierarchy depth.
|
|
8301
8394
|
*/
|
|
8302
|
-
declare const KitsGridItem: ({ id: externalId, colSpan, children }: IKitsGridItemProps) => React__default.JSX.Element;
|
|
8395
|
+
declare const KitsGridItem: ({ id: externalId, colSpan, style, children, }: IKitsGridItemProps) => React__default.JSX.Element;
|
|
8303
8396
|
|
|
8304
8397
|
declare const Flex: {
|
|
8305
8398
|
({ className, children, ref, ...props }: PropsWithChildren<IFlexComponent>): React__default.JSX.Element;
|
|
@@ -8798,7 +8891,7 @@ declare const FilePicker: FC<IFileUploader>;
|
|
|
8798
8891
|
|
|
8799
8892
|
declare const Label: FunctionComponent<ILabelProps>;
|
|
8800
8893
|
|
|
8801
|
-
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;
|
|
8802
8895
|
|
|
8803
8896
|
/**
|
|
8804
8897
|
* The core logic engine for an individual form field.
|
|
@@ -14917,4 +15010,4 @@ declare const localeFiles: {
|
|
|
14917
15010
|
};
|
|
14918
15011
|
|
|
14919
15012
|
export { ALPHA_COLOR_VARS, ALPHA_STEPS, ALPHA_TOKEN_NAMES, AccentEdge, CustomAccordion as Accordion, ActionCard, Alert, AlertDescription, AlertIcon, AlertTitle, KitsAnimatePresence as AnimatePresence, AnyFile, Avatar, AvatarStack, Badge, Banner, BottomTabBar, Box, BreadCrumb, Button, Card, Carousel, Center, ChatBubble, Chip, CircularProgress, Collapse, CommandPalette, Container, CustomPopover, DEFAULT_NATIVE_SHADOWS, DataView, DataViewContext, DateSeparator, Delta, DetailList as DetailsList, Divider, Donut, DotGrid, EDateFormat, EKeyFilter, Editable, EmptyState, FIELD_LABEL_MARGIN, FIELD_MARGIN, Flex, Form, FormSelect, GUTTER, Gallery, Gauge, Form as GoForm, Datatable as GoTable, KitsGrid as Grid, KitsGridItem as GridItem, GroupedBars, HELPER_TEXT_MARGIN, HStack, Heading, Icon, IconMap, Image, KitsInputSwitch as InputSwitch, KeyboardNavContext, KitsAutoComplete, KitsBarChart, KitsCascadeSelect, KitsCheckbox as KitsCheckboxes, KitsConfirm, KitsConfirmPopup, KitsContainer, KitsInputCalendar as KitsDatepicker, KitsDialogControlled as KitsDialog, KitsDropdown, FilePicker as KitsFilePicker, KitsInputColorPicker, KitsInputLocation, KitsInputMask, KitsInputNumber, KitsInputPassword, KitsInputText, KitsInputTextarea, KitsLineChart, KitsListBox, KitsMultiSelect, KitsPhoneComponent, KitsRadar, KitsRadio as KitsRadios, RadiusPicker as KitsRadiusPicker, KitsSliders, KitsThemeProvider, KitsToast, KitsTreeSelect, Label, Legend, Link, List, ListItem, Loader, LocaleContext, LocaleContextProvider, MainContext, MainContextProvider, MapTile, MessageComposer, MessageReceipt, MetricCard, KitsMultiSelect as MultiSelect, PersonCard, ProgressBar, RadiusPicker, RankedList, ReducedMotionProvider, Rise, SHADOW_PRESET_KEYS, SPACER, KitsScrollView as ScrollView, SegmentedControl, FormSelect as Select, SelectButton, Skeleton$1 as Skeleton, SkeletonRows, Skeleton as SkeletonText, Sparkline, StackedBars, StatCard, StatGroup, StatePill, StatusCard, Stepper, Striped, Svg, TableContext, Tabs, Text, ThemeContextProvider, Timeline, Tip, Tooltip, Translate, KitsTreeSelect as TreeSelect, TreeView, TriStateCheckbox, TypingIndicator, VStack, Wash, WidgetPanel, borderProperties, breakpoints, capitalizeFirstLetter, checkExtAgainstAccepted, checkNameDuplication, colorWithAlpha, dateTimeFormat, deepMerge, defaultSeverityTheme, defaultTheme, downloadCanvas, dynamicList, expandShadowNative, extendTheme, fileTypeIcon, fileValidation, filesExt, filesMemes, filesTypes, flattenSlotStyles, fontSizeMapping, formFileValidation, formatNumber, getActiveNativeShadows, getCombinedChildIds, getCustomDateTime, getDateElements, getDefaultValues, getMeme, getParams, getPropertyByPath, getType, getTypes, getURLParams, imagesExt, imagesMemes, imagesTypes, isAlphaToken, isNumber, isSemanticToken, isShadowPreset, isThemeToken, isToday, isValidURL, kitsMotion, listingProperties, localeFiles, allProperties as mapCssProperties, mergeRefs, nonPxProperties, propertiesWithoutCssEquivalent, pxProperties, resolveStyleRecord, resolveTokenValue, schemaBuilder, setActiveNativeShadows, shadowNative, shadowWeb, sizeMapping, sizingProperties, timeAgo, timeSince, toMemes, useAllSeverityColors, useComponentDefaults, useCountUp, useDataView, useDialog, useDisclosure, useEnter, useFieldLogic, useFocusStyles, useFormFieldKeyboardNav, useFormManager, useKeyboardNav, useKeyboardNavProvider, useKitsColorScheme, useKitsConcerto, useKitsTheme, useLanguage, useMeasuredWidth, useNativeColorMap, usePopup, useReducedMotion, useResolvedElementStyles, useResolvedStyle, useRtlLineHeight, useScrollState, useSelectionController, useSeverityColors, useTable, useTheme, useThemedFont, useToast };
|
|
14920
|
-
export type { AlignmentsValues, AllSlotKeys, AnimationsValues, AvatarShape, AvatarSize, AvatarStatus, BannerAction, BannerStatus, BaseFieldProps, Booleanish, Breakpoint, CallbackProps, ChatBubbleTone, ChatBubbleVariant, ChipSeverity, ChipSize, ColorMode, ColorScale, ColorValue, Colors, ColorsType, ComponentSize, CustomSubmitButtonProps, DataTableFilterMeta, DataTableFilterMetaData, DataTableOperatorFilterMetaData, DataTableSelectionSingleChangeEvent, DataTableSortMeta, DeepPartial, DetailItemInputType, DynamicValue, ElementProps, EnteringAnimation, ExitingAnimation, ExpandedKeys, FetchError, FetchSuccess, FetchTableDataRes, FetchTablePaginationData, FieldWrapperProps, File$1 as File, FileUploaderTemplate, FileUploaderTemplateParams, FlexAlignmentsValues, FlexValues, FormBooleanEvent, FormBooleanTarget, FormEvent, FormTarget, GroupFieldConfigs, HighSizingValue, IAccentEdgeProps, IAccordionElementSlots, IAccordionProps, IActionCardProps, IAddressComponentValue, IAddressExperianFormat, IAddressFormat, IAddressFormatResults, IAddressSearchResults, IAlertComponent, IAlertProps, IAlignment, IAnimation, IAutoCompleteCore, IAutoCompleteElement, IAvatarElementSlots, IAvatarProps, IAvatarStackElementSlots, IAvatarStackProps, IBadgeProps, IBannerProps, IBarChartProps, IBaseValidation, IBasicSectionProps, IBg, IBodyTemplate, IBodyTemplateIcon, IBorder, IBottomTabBarElementSlots, IBottomTabBarProps, IBoxComponent, IBuilderAddressField, IBuilderCheckboxField, IBuilderContainerField, IBuilderDateField, IBuilderField, IBuilderFieldBase, IBuilderFieldExport, IBuilderFileField, IBuilderGroupField, IBuilderMultiselectField, IBuilderNumberField, IBuilderPhoneField, IBuilderRadiosField, IBuilderRadiusPickerField, IBuilderSectionField, IBuilderSelectField, IBuilderSwitchField, IBuilderTagsField, IBuilderTextField, IBuilderTextareaField, IButton, IButtonElementSlots, IButtonParams, IButtonProps, IButtonState, IButtonsFilter, ICanvasProps, ICardComponent, ICardElementSlots, ICarouselElementSlots, ICarouselProps, ICascadeSelect, ICascadeSelectCore, IChatBubbleElementSlots, IChatBubbleProps, ICheckbox, ICheckboxFilter, ICheckboxSlots, IChildren, IChildrenParams, IChipProps, ICircularProgressProps, ICollapseProps, IColorPicker, IColumn, IColumnBase, ICombined, ICommandPaletteGroup, ICommandPaletteItem, ICommandPaletteProps, IComponentThemeConfig, IConditionGroupProps, IConditionRowProps, IConditionRule, IConditionsSectionProps, IConfirmDialogProps, IConfirmPopupProps, IContainer, IContainerCardProps, IContainerProps, IContextValues, ICountrySearchResults, ICssStyling, IDVButtonsFilter, IDVCheckboxFilter, IDVDateFilter, IDVDropdownFilter, IDVFilters, IDVMessages, IDVMultiselectFilter, IDVNumberFilter, IDVPaginationRequest, IDVPaginationResponse, IDVPaginationState, IDVPhoneFilter, IDVRangeFilter, IDVTextFilter, IDVTriStateFilter, IDataTableContextValues, IDataTableProps, IDataViewContextValues, IDataViewProps, IDataViewRefValues, IDatatableRefValues, IDate, IDateFilter, IDateProps, IDateSeparatorElementSlots, IDateSeparatorProps, IDateValidation, IDatepickerSlots, IDeltaProps, IDetailItem, IDetailListProps, IDialogButton, IDialogProps, IDialogRef, IDialogState, IDisplay, IDividerComponent, IDonutProps, IDonutSegment, IDotGridProps, IDoughnutChartProps, IDropdownCore, IDropdownFilter, IDropdownSelect, IEditableProps, IEditors, IEffects, IElementBase, IElementSlotConfig, IElementStyle, IEmail, IEmailSearchResults, IEmptyStateElementSlots, IEmptyStateProps, IFieldCardProps, IFieldCondition, IFieldPreviewProps, IFile, IFileUploader, IFileUploaderElement, IFileUploaderTypes, IFileValidation, IFilesExtTypeKeys, IFilters, IFlexAlignment, IFlexComponent, IFormAddon, IFormBuilderInternalState, IFormBuilderMeta, IFormBuilderPayload, IFormBuilderProps, IFormComponent, IFormElement, IFormElementBaseSlots, IFormElementSlots, IFormGrid, IFormListsElements, IFormSelect, IFormSelectElements, IFormSingleElement, IGalleryElementSlots, IGalleryItem, IGalleryProps, IGaugeProps, IGrid, IGridComponent, IGridItem, IGridItemComponent, IGroup, IGroupCardProps, IGroupElementSlots, IGroupSettings, IGroupedBarsDatum, IGroupedBarsProps, IHeaderElementSlots, IHeadingComponent, IIconProps, IImageComponent, IImagesExtTypeKeys, IInteractivity, IKeyedColumn, IKitsAnimation, IKitsBarChartDatum, IKitsBarChartProps, IKitsCheckboxProps, IKitsComponentDefaults, IKitsContainer, IKitsDialogControlled, IKitsInputCalendar, IKitsInputColorPicker, IKitsInputLocation, IKitsInputMask, IKitsInputNumber, IKitsInputPassword, IKitsInputRating, IKitsInputSwitch, IKitsInputText, IKitsInputTextarea, IKitsLineChartProps, IKitsLineChartSeries, IKitsPhoneInput, IKitsRadioProps, IKitsTheme, IKitsThemeColors, IKitsThemeConfig, IKitsThemeContextValues, IKitsThemeFontSizes, IKitsThemeFontWeights, IKitsThemeFonts, IKitsThemeLineHeights, IKitsThemeRadii, IKitsThemeShadows, IKitsThemeSpacing, IKitsToastRef, ILabelElement, ILabelProps, ILanguage, ILayout, ILegendItem, ILegendProps, ILineChartProps, ILinkComponent, ILinkOverrides, IList, IListBoxCore, IListBoxElement, IListBoxSelect, IListItem, IListing, ILoaderProps, ILoadingIndicatorContext, ILocaleContextProps, ILocaleContextValues, ILocation, ILocationDetailsResponse, ILocationResponse, IMainContextProps, IMainContextValues, IMapTilePoint, IMapTileProps, IMemes, IMenuItem, IMessageComposerElementSlots, IMessageComposerProps, IMessageReceiptElementSlots, IMessageReceiptProps, IMessages, IMetricCardProps, IMinusButton, IModalComponent, IModalFormProps, IMultiSelect, IMultiSelectCore, IMultiSelectSlots, IMultiselect, IMultiselectFilter, INativeShadow, INonCrossPlatformTypes, INumberFilter, INumberInput, INumberProps, INumberValidation, IObjectGroup, IOneOfTypes, IOptionItem, IOptionsEditorProps, IOptionsSource, IPageISection, IPaginationRequest, IPaginationResponse, IPaginatorLabels, IPaletteItemProps, IPaletteProps, IPanelCustomSlot, IPassword, IPasswordProps, IPersonCardProps, IPhone, IPhoneFilter, IPhoneObjectValue, IPhoneValidationResults, IPhoneValue, IPieChartProps, IPlusButton, IPolarAreaChartProps, IPopoverProps, IProgressBarElementSlots, IProgressBarProps, IPropertiesPanelProps, IRTLDetection, IRadarChartProps, IRadarProps, IRadarSeries, IRadioCheckboxListItem, IRadioGroup, IRadioSlots, IRadiusPickerEvents, IRadiusPickerField, IRadiusPickerI18n, IRadiusPickerProps, IRangeFilter, IRankedListProps, IRankedListRow, IRef, IRepeatableSettings, IResponsiveElement, IRiseProps, ISVGComponent, IScrollViewComponent, ISegmentedControlOption, ISegmentedControlProps, ISelect, ISelectBase, ISelectCore, ISelectElement, ISelectSlots, ISelectType, ISelectedFile, ISelectedFileType, ISelectionValidation, ISeverityColorSlots, ISeverityThemeMap, IShadowDefinition, IShadowValue, ISidebarElementSlots, ISizing, ISkeleton, ISkeletonRowsProps, ISkeletonText, ISliderProps, ISpacing, ISparklineProps, IStackProps, IStackedBarsDatum, IStackedBarsProps, IStatCardElementSlots, IStatCardProps, IStatGroupElementSlots, IStatGroupProps, IStatePillProps, IStatisticsProps, IStats, IStatusCardProps, IStepperElementSlots, IStepperProps, IStripedProps, IStyleClasses, ISwitch, ISwitchSlots, ITabBarItem, ITabItem, ITableElementSlots, ITableFlatConfig, ITabsElementSlots, ITabsProps, ITags, IText, ITextComponent, ITextFieldProps, ITextFilter, ITextInput, ITextInputProps, ITextInputSlots, ITextValidation, ITextarea, IThemeContextProps, IThemeContextValues, ITimelineElementSlots, ITimelineItem, ITimelineProps, ITipProps, IToastAction, IToastFunction, IToastOptions, IToastParams, IToolbarProps, ITransforms, ITransition, ITranslatableInputProps, ITranslatableText, ITranslateComponent, ITreeItem, ITreeSelect, ITreeSelectCore, ITreeSelectElement, ITreeSelectNode, ITreeViewProps, ITriStateFilter, ITypingIndicatorElementSlots, ITypingIndicatorProps, IUnkeyedColumn, IUseCountUpOptions, IUseFormReturn, IUserAvatar, IValidationSectionProps, IWashProps, IWidgetBarIncomingProp, IWidgetChartContextProps, IWidgetChartProp, IWidgetData, IWidgetDoughnutIncomingProp, IWidgetLineIncomingProp, IWidgetPanelProps, IWidgetPieIncomingProp, IWidgetPolarAreaIncomingProp, IWidgetRadarIncomingProp, IconName, IconType, InputTextFieldProps, KitsBreakpoint, KitsConditionalObject, KitsDevice, KitsMotion, KitsOrientation, KitsPlatform, KitsResponsiveObject, KitsResponsiveValue, KitsThemeOverride, LabelVariant, LatLng, LoadMode, LoadingIndicatorRenderer, LogicFunction, MapInteraction, MeasurementValues, MessageReceiptState, Nullable, Numbering0_12, Numbering0_32, Numberish, OnCenterChange, OnLocationError, OnLocationFound, OnRadiusChange, OnRadiusValueChange, OnSubmitHandler, OnUnitChange, Orientation, PaginationState, PaginatorPageChangeEvent$1 as PaginatorPageChangeEvent, Permissions, PlatformKey, RadiusPickerDisplay, RadiusPickerLayout, RadiusPickerSize, RadiusUnit, RadiusValue, RenderLocationButtonProps, RenderMapProps, RenderSearchBoxProps, SelectFieldProps, SemanticColorTokens, ServerMethod, ServerResponse, ServerSideProps, SetManyOpts, Severity, Shades, ShadowPreset, Shapes, SidesValues, SizingNumbering, SizingValue, StatePillState, StepperVariant, TAcceptedFileType, TBuilderFieldType, TCheckboxRadioMode, TCheckboxRadioSize, TConditionAction, TConditionMatch, TConditionOperator, TDateBoundary, TDynamicFlag, TExternalFilterLabelMode, TFiltersLayout, TIsoFormat, TItemsPerRow, TKeyFilter, TLocationProvider, TPaginatorAlign, TextLabels, TextProps, ThemedFontKind, TimelineItemStatus, Timeout, TimingNumbering, ToastPosition, ToastSeverity, ToastSize, TooltipDataAttributes, TooltipProps, TreeChangeProps, TreeCheckboxSelectionKeyType, TreeCheckboxSelectionKeys, TreeNode, TreeNodeClickEvent, TreeNodeTemplateOptions, TreeProps, TreeRef, TreeSelectionEvent, Types, UseComponentDefaultsResult, UseDisclosureReturnType, UseFieldLogicElementProps, UseFieldLogicProps, UseFieldLogicReturn, UseFormManagerEvents, UseFormManagerReturn, UseToastApi, ValidationProps, children, clearFunction, downloadableFileResponse, settings1, settings2 };
|
|
15013
|
+
export type { AlignmentsValues, AllSlotKeys, AnimationsValues, AvatarShape, AvatarSize, AvatarStatus, BannerAction, BannerStatus, BaseFieldProps, Booleanish, Breakpoint, CallbackProps, ChatBubbleTone, ChatBubbleVariant, ChipSeverity, ChipSize, ColorMode, ColorScale, ColorValue, Colors, ColorsType, ComponentSize, CustomSubmitButtonProps, DataTableFilterMeta, DataTableFilterMetaData, DataTableOperatorFilterMetaData, DataTableSelectionSingleChangeEvent, DataTableSortMeta, DeepPartial, DetailItemInputType, DynamicValue, ElementProps, EnteringAnimation, ExitingAnimation, ExpandedKeys, FetchError, FetchSuccess, FetchTableDataRes, FetchTablePaginationData, FieldWrapperProps, File$1 as File, FileUploaderTemplate, FileUploaderTemplateParams, FlexAlignmentsValues, FlexValues, FormBooleanEvent, FormBooleanTarget, FormEvent, FormTarget, GroupFieldConfigs, HighSizingValue, IAccentEdgeProps, IAccordionElementSlots, IAccordionProps, IActionCardProps, IAddressComponentValue, IAddressExperianFormat, IAddressFormat, IAddressFormatResults, IAddressSearchResults, IAlertComponent, IAlertProps, IAlignment, IAnimation, IAutoCompleteCore, IAutoCompleteElement, IAvatarElementSlots, IAvatarProps, IAvatarStackElementSlots, IAvatarStackProps, IBadgeProps, IBannerProps, IBarChartProps, IBaseValidation, IBasicSectionProps, IBg, IBodyTemplate, IBodyTemplateIcon, IBorder, IBottomTabBarElementSlots, IBottomTabBarProps, IBoxComponent, IBuilderAddressField, IBuilderCheckboxField, IBuilderContainerField, IBuilderDateField, IBuilderField, IBuilderFieldBase, IBuilderFieldExport, IBuilderFileField, IBuilderGroupField, IBuilderMultiselectField, IBuilderNumberField, IBuilderPhoneField, IBuilderRadiosField, IBuilderRadiusPickerField, IBuilderSectionField, IBuilderSelectField, IBuilderSwitchField, IBuilderTagsField, IBuilderTextField, IBuilderTextareaField, IButton, IButtonElementSlots, IButtonParams, IButtonProps, IButtonState, IButtonsFilter, ICanvasProps, ICardComponent, ICardElementSlots, ICarouselElementSlots, ICarouselProps, ICascadeSelect, ICascadeSelectCore, IChatBubbleElementSlots, IChatBubbleProps, ICheckbox, ICheckboxFilter, ICheckboxSlots, IChildren, IChildrenParams, IChipProps, ICircularProgressProps, ICollapseProps, IColorPicker, IColumn, IColumnBase, ICombined, ICommandPaletteGroup, ICommandPaletteItem, ICommandPaletteProps, IComponentThemeConfig, IConditionGroupProps, IConditionRowProps, IConditionRule, IConditionsSectionProps, IConfirmDialogProps, IConfirmPopupProps, IContainer, IContainerCardProps, IContainerProps, IContextValues, ICountrySearchResults, ICssStyling, IDVButtonsFilter, IDVCheckboxFilter, IDVDateFilter, IDVDropdownFilter, IDVFilters, IDVMessages, IDVMultiselectFilter, IDVNumberFilter, IDVPaginationRequest, IDVPaginationResponse, IDVPaginationState, IDVPhoneFilter, IDVRangeFilter, IDVTextFilter, IDVTriStateFilter, IDataTableContextValues, IDataTableProps, IDataViewContextValues, IDataViewProps, IDataViewRefValues, IDatatableRefValues, IDate, IDateFilter, IDateProps, IDateSeparatorElementSlots, IDateSeparatorProps, IDateValidation, IDatepickerSlots, IDeltaProps, IDetailItem, IDetailListProps, IDialogButton, IDialogProps, IDialogRef, IDialogState, IDisplay, IDividerComponent, IDonutProps, IDonutSegment, IDotGridProps, IDoughnutChartProps, IDropdownCore, IDropdownFilter, IDropdownSelect, IEditableProps, IEditors, IEffects, IElementBase, IElementSlotConfig, IElementStyle, IEmail, IEmailSearchResults, IEmptyStateElementSlots, IEmptyStateProps, IFieldCardProps, IFieldCondition, IFieldPreviewProps, IFile, IFileUploader, IFileUploaderElement, IFileUploaderTypes, IFileValidation, IFilesExtTypeKeys, IFilters, IFlexAlignment, IFlexComponent, IFormAddon, IFormBuilderInternalState, IFormBuilderMeta, IFormBuilderPayload, IFormBuilderProps, IFormComponent, IFormElement, IFormElementBaseSlots, IFormElementSlots, IFormGrid, IFormListsElements, IFormSelect, IFormSelectElements, IFormSingleElement, IGalleryElementSlots, IGalleryItem, IGalleryProps, IGaugeProps, IGrid, IGridCellStyle, IGridComponent, IGridItem, IGridItemComponent, IGroup, IGroupCardProps, IGroupElementSlots, IGroupSettings, IGroupedBarsDatum, IGroupedBarsProps, IHeaderElementSlots, IHeadingComponent, IIconProps, IImageComponent, IImagesExtTypeKeys, IInteractivity, IKeyedColumn, IKitsAnimation, IKitsBarChartDatum, IKitsBarChartProps, IKitsCheckboxProps, IKitsComponentDefaults, IKitsContainer, IKitsDialogControlled, IKitsInputCalendar, IKitsInputColorPicker, IKitsInputLocation, IKitsInputMask, IKitsInputNumber, IKitsInputPassword, IKitsInputRating, IKitsInputSwitch, IKitsInputText, IKitsInputTextarea, IKitsLineChartProps, IKitsLineChartSeries, IKitsPhoneInput, IKitsRadioProps, IKitsTheme, IKitsThemeColors, IKitsThemeConfig, IKitsThemeContextValues, IKitsThemeFontSizes, IKitsThemeFontWeights, IKitsThemeFonts, IKitsThemeLineHeights, IKitsThemeRadii, IKitsThemeShadows, IKitsThemeSpacing, IKitsToastRef, ILabelElement, ILabelProps, ILanguage, ILayout, ILegendItem, ILegendProps, ILineChartProps, ILinkComponent, ILinkOverrides, IList, IListBoxCore, IListBoxElement, IListBoxSelect, IListItem, IListing, ILoaderProps, ILoadingIndicatorContext, ILocaleContextProps, ILocaleContextValues, ILocation, ILocationDetailsResponse, ILocationResponse, IMainContextProps, IMainContextValues, IMapTilePoint, IMapTileProps, IMemes, IMenuItem, IMessageComposerElementSlots, IMessageComposerProps, IMessageReceiptElementSlots, IMessageReceiptProps, IMessages, IMetricCardProps, IMinusButton, IModalComponent, IModalFormProps, IMultiSelect, IMultiSelectCore, IMultiSelectSlots, IMultiselect, IMultiselectFilter, INativeShadow, INonCrossPlatformTypes, INumberFilter, INumberInput, INumberProps, INumberValidation, IObjectGroup, IOneOfTypes, IOptionItem, IOptionsEditorProps, IOptionsSource, IPageISection, IPaginationRequest, IPaginationResponse, IPaginatorLabels, IPaletteItemProps, IPaletteProps, IPanelCustomSlot, IPassword, IPasswordProps, IPersonCardProps, IPhone, IPhoneFilter, IPhoneObjectValue, IPhoneValidationResults, IPhoneValue, IPieChartProps, IPlusButton, IPolarAreaChartProps, IPopoverProps, IProgressBarElementSlots, IProgressBarProps, IPropertiesPanelProps, IRTLDetection, IRadarChartProps, IRadarProps, IRadarSeries, IRadioCheckboxListItem, IRadioGroup, IRadioSlots, IRadiusPickerEvents, IRadiusPickerField, IRadiusPickerI18n, IRadiusPickerProps, IRangeFilter, IRankedListProps, IRankedListRow, IRef, IRepeatableSettings, IResponsiveElement, IRiseProps, ISVGComponent, IScrollViewComponent, ISegmentedControlOption, ISegmentedControlProps, ISelect, ISelectBase, ISelectCore, ISelectElement, ISelectSlots, ISelectType, ISelectedFile, ISelectedFileType, ISelectionValidation, ISeverityColorSlots, ISeverityThemeMap, IShadowDefinition, IShadowValue, ISidebarElementSlots, ISizing, ISkeleton, ISkeletonRowsProps, ISkeletonText, ISliderProps, ISpacing, ISparklineProps, IStackProps, IStackedBarsDatum, IStackedBarsProps, IStatCardElementSlots, IStatCardProps, IStatGroupElementSlots, IStatGroupProps, IStatePillProps, IStatisticsProps, IStats, IStatusCardProps, IStepperElementSlots, IStepperProps, IStripedProps, IStyleClasses, ISwitch, ISwitchSlots, ITabBarItem, ITabItem, ITableElementSlots, ITableFlatConfig, ITabsElementSlots, ITabsProps, ITags, IText, ITextComponent, ITextFieldProps, ITextFilter, ITextInput, ITextInputProps, ITextInputSlots, ITextValidation, ITextarea, IThemeContextProps, IThemeContextValues, ITimelineElementSlots, ITimelineItem, ITimelineProps, ITipProps, IToastAction, IToastFunction, IToastOptions, IToastParams, IToolbarProps, ITransforms, ITransition, ITranslatableInputProps, ITranslatableText, ITranslateComponent, ITreeItem, ITreeSelect, ITreeSelectCore, ITreeSelectElement, ITreeSelectNode, ITreeViewProps, ITriStateFilter, ITypingIndicatorElementSlots, ITypingIndicatorProps, IUnkeyedColumn, IUseCountUpOptions, IUseFormReturn, IUserAvatar, IValidationSectionProps, IWashProps, IWidgetBarIncomingProp, IWidgetChartContextProps, IWidgetChartProp, IWidgetData, IWidgetDoughnutIncomingProp, IWidgetLineIncomingProp, IWidgetPanelProps, IWidgetPieIncomingProp, IWidgetPolarAreaIncomingProp, IWidgetRadarIncomingProp, IconName, IconType, InputTextFieldProps, KitsBreakpoint, KitsConditionalObject, KitsDevice, KitsMotion, KitsOrientation, KitsPlatform, KitsResponsiveObject, KitsResponsiveValue, KitsThemeOverride, LabelVariant, LatLng, LoadMode, LoadingIndicatorRenderer, LogicFunction, MapInteraction, MeasurementValues, MessageReceiptState, Nullable, Numbering0_12, Numbering0_32, Numberish, OnCenterChange, OnLocationError, OnLocationFound, OnRadiusChange, OnRadiusValueChange, OnSubmitHandler, OnUnitChange, Orientation, PaginationState, PaginatorPageChangeEvent$1 as PaginatorPageChangeEvent, Permissions, PlatformKey, RadiusPickerDisplay, RadiusPickerLayout, RadiusPickerSize, RadiusUnit, RadiusValue, RenderLocationButtonProps, RenderMapProps, RenderSearchBoxProps, SelectFieldProps, SemanticColorTokens, ServerMethod, ServerResponse, ServerSideProps, SetManyOpts, Severity, Shades, ShadowPreset, Shapes, SidesValues, SizingNumbering, SizingValue, StatePillState, StepperVariant, TAcceptedFileType, TBuilderFieldType, TCheckboxRadioMode, TCheckboxRadioSize, TConditionAction, TConditionMatch, TConditionOperator, TDateBoundary, TDynamicFlag, TExternalFilterLabelMode, TFiltersLayout, TIsoFormat, TItemsPerRow, TKeyFilter, TLocationProvider, TPaginatorAlign, TextLabels, TextProps, ThemedFontKind, TimelineItemStatus, Timeout, TimingNumbering, ToastPosition, ToastSeverity, ToastSize, TooltipDataAttributes, TooltipProps, TreeChangeProps, TreeCheckboxSelectionKeyType, TreeCheckboxSelectionKeys, TreeNode, TreeNodeClickEvent, TreeNodeTemplateOptions, TreeProps, TreeRef, TreeSelectionEvent, Types, UseComponentDefaultsResult, UseDisclosureReturnType, UseFieldLogicElementProps, UseFieldLogicProps, UseFieldLogicReturn, UseFormManagerEvents, UseFormManagerReturn, UseToastApi, ValidationProps, children, clearFunction, downloadableFileResponse, settings1, settings2 };
|
|
@@ -7,7 +7,12 @@ var React = require('react');
|
|
|
7
7
|
var reactNative = require('react-native');
|
|
8
8
|
var GridContext = require('../../Grid/native/GridContext.cjs');
|
|
9
9
|
|
|
10
|
-
const KitsGridItem = ({
|
|
10
|
+
const KitsGridItem = ({
|
|
11
|
+
id: externalId,
|
|
12
|
+
colSpan,
|
|
13
|
+
style,
|
|
14
|
+
children
|
|
15
|
+
}) => {
|
|
11
16
|
const autoId = React.useId();
|
|
12
17
|
const id = externalId ?? autoId;
|
|
13
18
|
const { registerItem, unregisterItem, getItemWidth, containerWidth } = GridContext.useGridContext();
|
|
@@ -24,7 +29,10 @@ const KitsGridItem = ({ id: externalId, colSpan, children }) => {
|
|
|
24
29
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
25
30
|
reactNative.View,
|
|
26
31
|
{
|
|
27
|
-
style:
|
|
32
|
+
style: [
|
|
33
|
+
measured ? { width, flexShrink: 0, flexGrow: 0 } : styles.fallback,
|
|
34
|
+
style
|
|
35
|
+
],
|
|
28
36
|
children
|
|
29
37
|
}
|
|
30
38
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"KitsGridItem.cjs","sources":["../../../../../src/layout/GridItem/native/KitsGridItem.tsx"],"sourcesContent":["import React, { useEffect, useId, type ReactNode } from 'react';\nimport { View, StyleSheet } from 'react-native';\nimport { useGridContext } from '../../Grid/native/GridContext';\n\nexport interface IKitsGridItemProps {\n /** Unique identifier — used for context registration. Auto-generated if omitted. */\n id?: string;\n /** Number of grid columns this item spans */\n colSpan: number;\n children?: ReactNode;\n}\n\n/**\n * Pure React Native grid item.\n *\n * Registers its colSpan with the parent KitsGrid via context.\n * Reads its calculated pixel width from context and applies it.\n *\n * Does NOT need to be a direct child of KitsGrid — context\n * handles communication regardless of hierarchy depth.\n */\nconst KitsGridItem = ({
|
|
1
|
+
{"version":3,"file":"KitsGridItem.cjs","sources":["../../../../../src/layout/GridItem/native/KitsGridItem.tsx"],"sourcesContent":["import React, { useEffect, useId, type ReactNode } from 'react';\nimport { View, StyleSheet, type ViewStyle } from 'react-native';\nimport { useGridContext } from '../../Grid/native/GridContext';\n\n/**\n * The style a grid cell may carry, with the keys that decide its SIZE removed.\n *\n * ⛔ `width`, `flex` AND `flexBasis` ARE FORBIDDEN BY THE TYPE, not merely\n * discouraged. The grid measures its container, divides by `columns`, and hands\n * every cell an exact pixel width. A caller who sets any of these breaks that\n * arithmetic for the whole ROW, because flexbox then redistributes space the\n * neighbouring cells were counting on — and the symptom shows up on a SIBLING,\n * nowhere near the line that caused it. A compile error is the only place that\n * mistake is cheap.\n *\n * ⚠️ `minWidth`, `maxWidth`, `flexGrow` and `flexShrink` go with them: each\n * overrides a measured width without looking like it does.\n */\nexport type IKitsGridItemStyle = Omit<\n ViewStyle,\n | 'width'\n | 'minWidth'\n | 'maxWidth'\n | 'flex'\n | 'flexBasis'\n | 'flexGrow'\n | 'flexShrink'\n>;\n\nexport interface IKitsGridItemProps {\n /** Unique identifier — used for context registration. Auto-generated if omitted. */\n id?: string;\n /** Number of grid columns this item spans */\n colSpan: number;\n /**\n * Extra style for the cell, applied AFTER its measured width.\n *\n * ⛔ THIS IS THE STACKING LEVEL, AND NOTHING ELSE COULD REACH IT. Cells are\n * siblings inside one flex-wrap row, so a panel that opens out of its own\n * field — autocomplete suggestions, a popover, a menu — is painted UNDER\n * every cell that comes after it. A `zIndex` on anything INSIDE the cell\n * orders that thing within the cell and changes nothing outside it, and\n * `FieldWrapper`'s own `zIndex: isFocused ? 1000 : undefined` is inside it\n * too. Measured on a device: an address suggestion list drew its background,\n * and the next field's label and box drew on top of it.\n *\n * ⚠️ Sizing keys are removed by the type — see `IKitsGridItemStyle`.\n */\n style?: IKitsGridItemStyle;\n children?: ReactNode;\n}\n\n/**\n * Pure React Native grid item.\n *\n * Registers its colSpan with the parent KitsGrid via context.\n * Reads its calculated pixel width from context and applies it.\n *\n * Does NOT need to be a direct child of KitsGrid — context\n * handles communication regardless of hierarchy depth.\n */\nconst KitsGridItem = ({\n id: externalId,\n colSpan,\n style,\n children,\n}: IKitsGridItemProps) => {\n const autoId = useId();\n const id = externalId ?? autoId;\n const { registerItem, unregisterItem, getItemWidth, containerWidth } =\n useGridContext();\n\n // Register on mount and when colSpan changes\n useEffect(() => {\n registerItem(id, colSpan);\n }, [id, colSpan, registerItem]);\n\n // Unregister on unmount\n useEffect(() => {\n return () => {\n unregisterItem(id);\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [id]);\n\n const width = getItemWidth(id);\n const measured = containerWidth > 0 && width != null;\n\n return (\n <View\n /* The measured width comes FIRST, so a caller's style layers on top of it\n for everything the type still permits and cannot replace it. */\n style={[\n measured ? { width, flexShrink: 0, flexGrow: 0 } : styles.fallback,\n style,\n ]}\n >\n {children}\n </View>\n );\n};\n\nconst styles = StyleSheet.create({\n fallback: {\n width: '100%',\n },\n});\n\nexport default KitsGridItem;\n"],"names":["useId","useGridContext","useEffect","jsx","View","StyleSheet"],"mappings":";;;;;;;;;AA6DA,MAAM,eAAe,CAAC;AAAA,EACpB,EAAA,EAAI,UAAA;AAAA,EACJ,OAAA;AAAA,EACA,KAAA;AAAA,EACA;AACF,CAAA,KAA0B;AACxB,EAAA,MAAM,SAASA,WAAA,EAAM;AACrB,EAAA,MAAM,KAAK,UAAA,IAAc,MAAA;AACzB,EAAA,MAAM,EAAE,YAAA,EAAc,cAAA,EAAgB,YAAA,EAAc,cAAA,KAClDC,0BAAA,EAAe;AAGjB,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,YAAA,CAAa,IAAI,OAAO,CAAA;AAAA,EAC1B,CAAA,EAAG,CAAC,EAAA,EAAI,OAAA,EAAS,YAAY,CAAC,CAAA;AAG9B,EAAAA,eAAA,CAAU,MAAM;AACd,IAAA,OAAO,MAAM;AACX,MAAA,cAAA,CAAe,EAAE,CAAA;AAAA,IACnB,CAAA;AAAA,EAEF,CAAA,EAAG,CAAC,EAAE,CAAC,CAAA;AAEP,EAAA,MAAM,KAAA,GAAQ,aAAa,EAAE,CAAA;AAC7B,EAAA,MAAM,QAAA,GAAW,cAAA,GAAiB,CAAA,IAAK,KAAA,IAAS,IAAA;AAEhD,EAAA,uBACEC,cAAA;AAAA,IAACC,gBAAA;AAAA,IAAA;AAAA,MAGC,KAAA,EAAO;AAAA,QACL,QAAA,GAAW,EAAE,KAAA,EAAO,UAAA,EAAY,GAAG,QAAA,EAAU,CAAA,KAAM,MAAA,CAAO,QAAA;AAAA,QAC1D;AAAA,OACF;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ;AAEA,MAAM,MAAA,GAASC,uBAAW,MAAA,CAAO;AAAA,EAC/B,QAAA,EAAU;AAAA,IACR,KAAA,EAAO;AAAA;AAEX,CAAC,CAAA;;;;"}
|
|
@@ -3,7 +3,12 @@ import { useId, useEffect } from 'react';
|
|
|
3
3
|
import { View, StyleSheet } from 'react-native';
|
|
4
4
|
import { useGridContext } from '../../Grid/native/GridContext.js';
|
|
5
5
|
|
|
6
|
-
const KitsGridItem = ({
|
|
6
|
+
const KitsGridItem = ({
|
|
7
|
+
id: externalId,
|
|
8
|
+
colSpan,
|
|
9
|
+
style,
|
|
10
|
+
children
|
|
11
|
+
}) => {
|
|
7
12
|
const autoId = useId();
|
|
8
13
|
const id = externalId ?? autoId;
|
|
9
14
|
const { registerItem, unregisterItem, getItemWidth, containerWidth } = useGridContext();
|
|
@@ -20,7 +25,10 @@ const KitsGridItem = ({ id: externalId, colSpan, children }) => {
|
|
|
20
25
|
return /* @__PURE__ */ jsx(
|
|
21
26
|
View,
|
|
22
27
|
{
|
|
23
|
-
style:
|
|
28
|
+
style: [
|
|
29
|
+
measured ? { width, flexShrink: 0, flexGrow: 0 } : styles.fallback,
|
|
30
|
+
style
|
|
31
|
+
],
|
|
24
32
|
children
|
|
25
33
|
}
|
|
26
34
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"KitsGridItem.js","sources":["../../../../../src/layout/GridItem/native/KitsGridItem.tsx"],"sourcesContent":["import React, { useEffect, useId, type ReactNode } from 'react';\nimport { View, StyleSheet } from 'react-native';\nimport { useGridContext } from '../../Grid/native/GridContext';\n\nexport interface IKitsGridItemProps {\n /** Unique identifier — used for context registration. Auto-generated if omitted. */\n id?: string;\n /** Number of grid columns this item spans */\n colSpan: number;\n children?: ReactNode;\n}\n\n/**\n * Pure React Native grid item.\n *\n * Registers its colSpan with the parent KitsGrid via context.\n * Reads its calculated pixel width from context and applies it.\n *\n * Does NOT need to be a direct child of KitsGrid — context\n * handles communication regardless of hierarchy depth.\n */\nconst KitsGridItem = ({
|
|
1
|
+
{"version":3,"file":"KitsGridItem.js","sources":["../../../../../src/layout/GridItem/native/KitsGridItem.tsx"],"sourcesContent":["import React, { useEffect, useId, type ReactNode } from 'react';\nimport { View, StyleSheet, type ViewStyle } from 'react-native';\nimport { useGridContext } from '../../Grid/native/GridContext';\n\n/**\n * The style a grid cell may carry, with the keys that decide its SIZE removed.\n *\n * ⛔ `width`, `flex` AND `flexBasis` ARE FORBIDDEN BY THE TYPE, not merely\n * discouraged. The grid measures its container, divides by `columns`, and hands\n * every cell an exact pixel width. A caller who sets any of these breaks that\n * arithmetic for the whole ROW, because flexbox then redistributes space the\n * neighbouring cells were counting on — and the symptom shows up on a SIBLING,\n * nowhere near the line that caused it. A compile error is the only place that\n * mistake is cheap.\n *\n * ⚠️ `minWidth`, `maxWidth`, `flexGrow` and `flexShrink` go with them: each\n * overrides a measured width without looking like it does.\n */\nexport type IKitsGridItemStyle = Omit<\n ViewStyle,\n | 'width'\n | 'minWidth'\n | 'maxWidth'\n | 'flex'\n | 'flexBasis'\n | 'flexGrow'\n | 'flexShrink'\n>;\n\nexport interface IKitsGridItemProps {\n /** Unique identifier — used for context registration. Auto-generated if omitted. */\n id?: string;\n /** Number of grid columns this item spans */\n colSpan: number;\n /**\n * Extra style for the cell, applied AFTER its measured width.\n *\n * ⛔ THIS IS THE STACKING LEVEL, AND NOTHING ELSE COULD REACH IT. Cells are\n * siblings inside one flex-wrap row, so a panel that opens out of its own\n * field — autocomplete suggestions, a popover, a menu — is painted UNDER\n * every cell that comes after it. A `zIndex` on anything INSIDE the cell\n * orders that thing within the cell and changes nothing outside it, and\n * `FieldWrapper`'s own `zIndex: isFocused ? 1000 : undefined` is inside it\n * too. Measured on a device: an address suggestion list drew its background,\n * and the next field's label and box drew on top of it.\n *\n * ⚠️ Sizing keys are removed by the type — see `IKitsGridItemStyle`.\n */\n style?: IKitsGridItemStyle;\n children?: ReactNode;\n}\n\n/**\n * Pure React Native grid item.\n *\n * Registers its colSpan with the parent KitsGrid via context.\n * Reads its calculated pixel width from context and applies it.\n *\n * Does NOT need to be a direct child of KitsGrid — context\n * handles communication regardless of hierarchy depth.\n */\nconst KitsGridItem = ({\n id: externalId,\n colSpan,\n style,\n children,\n}: IKitsGridItemProps) => {\n const autoId = useId();\n const id = externalId ?? autoId;\n const { registerItem, unregisterItem, getItemWidth, containerWidth } =\n useGridContext();\n\n // Register on mount and when colSpan changes\n useEffect(() => {\n registerItem(id, colSpan);\n }, [id, colSpan, registerItem]);\n\n // Unregister on unmount\n useEffect(() => {\n return () => {\n unregisterItem(id);\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [id]);\n\n const width = getItemWidth(id);\n const measured = containerWidth > 0 && width != null;\n\n return (\n <View\n /* The measured width comes FIRST, so a caller's style layers on top of it\n for everything the type still permits and cannot replace it. */\n style={[\n measured ? { width, flexShrink: 0, flexGrow: 0 } : styles.fallback,\n style,\n ]}\n >\n {children}\n </View>\n );\n};\n\nconst styles = StyleSheet.create({\n fallback: {\n width: '100%',\n },\n});\n\nexport default KitsGridItem;\n"],"names":[],"mappings":";;;;;AA6DA,MAAM,eAAe,CAAC;AAAA,EACpB,EAAA,EAAI,UAAA;AAAA,EACJ,OAAA;AAAA,EACA,KAAA;AAAA,EACA;AACF,CAAA,KAA0B;AACxB,EAAA,MAAM,SAAS,KAAA,EAAM;AACrB,EAAA,MAAM,KAAK,UAAA,IAAc,MAAA;AACzB,EAAA,MAAM,EAAE,YAAA,EAAc,cAAA,EAAgB,YAAA,EAAc,cAAA,KAClD,cAAA,EAAe;AAGjB,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,YAAA,CAAa,IAAI,OAAO,CAAA;AAAA,EAC1B,CAAA,EAAG,CAAC,EAAA,EAAI,OAAA,EAAS,YAAY,CAAC,CAAA;AAG9B,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,OAAO,MAAM;AACX,MAAA,cAAA,CAAe,EAAE,CAAA;AAAA,IACnB,CAAA;AAAA,EAEF,CAAA,EAAG,CAAC,EAAE,CAAC,CAAA;AAEP,EAAA,MAAM,KAAA,GAAQ,aAAa,EAAE,CAAA;AAC7B,EAAA,MAAM,QAAA,GAAW,cAAA,GAAiB,CAAA,IAAK,KAAA,IAAS,IAAA;AAEhD,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MAGC,KAAA,EAAO;AAAA,QACL,QAAA,GAAW,EAAE,KAAA,EAAO,UAAA,EAAY,GAAG,QAAA,EAAU,CAAA,KAAM,MAAA,CAAO,QAAA;AAAA,QAC1D;AAAA,OACF;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ;AAEA,MAAM,MAAA,GAAS,WAAW,MAAA,CAAO;AAAA,EAC/B,QAAA,EAAU;AAAA,IACR,KAAA,EAAO;AAAA;AAEX,CAAC,CAAA;;;;"}
|