@lmb-it/kitsconcerto-native 0.1.268 → 0.1.270

package/form-renderer/components/FormRenderer/index.cjs

@@ -109,39 +109,48 @@ const FormRenderer = ({
           return null;
         }
         const colSpan = parseInt(gridItemProps[elementId] ?? "12", 10);
-        return /* @__PURE__ */ jsxRuntime.jsx(KitsGridItem.default, { id: elementId, colSpan, children: /* @__PURE__ */ jsxRuntime.jsx(
-          FieldWrapper_native.FieldWrapper,
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          KitsGridItem.default,
           {
-            element: resolvedElement,
-            control,
-            grid,
-            groupField,
-            getValues,
-            focusedField,
-            setFocusedField,
-            onGridChange: (value) => {
-              if (value != gridItemProps[elementId]) {
-                setGridItemProps((prevState) => ({
-                  ...prevState,
-                  [elementId]: value
-                }));
-              }
-            },
-            children: (props) => /* @__PURE__ */ jsxRuntime.jsx(
-              FieldComponent,
+            id: elementId,
+            colSpan,
+            style: resolvedElement.cellStyle,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              FieldWrapper_native.FieldWrapper,
               {
-                groupField,
                 element: resolvedElement,
                 control,
+                grid,
+                groupField,
                 getValues,
                 focusedField,
                 setFocusedField,
-                fieldLogic: props
-              }
+                onGridChange: (value) => {
+                  if (value != gridItemProps[elementId]) {
+                    setGridItemProps((prevState) => ({
+                      ...prevState,
+                      [elementId]: value
+                    }));
+                  }
+                },
+                children: (props) => /* @__PURE__ */ jsxRuntime.jsx(
+                  FieldComponent,
+                  {
+                    groupField,
+                    element: resolvedElement,
+                    control,
+                    getValues,
+                    focusedField,
+                    setFocusedField,
+                    fieldLogic: props
+                  }
+                )
+              },
+              elementId
             )
           },
           elementId
-        ) }, elementId);
+        );
       })
     }
   ) });

package/form-renderer/components/FormRenderer/index.cjs.map

@@ -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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"}
+{"version":3,"file":"index.cjs","sources":["../../../../../src/form-renderer/components/FormRenderer/index.native.tsx"],"sourcesContent":["// components/FormRenderer.tsx\n\nimport React, {useCallback, useEffect, useMemo, useState} from 'react';\nimport type {Control, FieldValues, UseFormGetValues} from 'react-hook-form';\nimport type {GroupFieldConfigs, IFormElement} from '@lmb-it/kitsconcerto-types';\nimport {FieldWrapper} from '../layout/FieldWrapper';\nimport {KeyboardNavContext, useKeyboardNavProvider} from '../../../hooks/useKeyboardNavigation';\n\n// Import all your \"dumb\" field components\nimport {\n    Checkboxes,\n    ColorPicker,\n    CombinedElement,\n    ContainerElement,\n    DateField,\n    FileUploader,\n    Group,\n    InputNumber,\n    InputText,\n    ListBox,\n    Location,\n    NormalSelect,\n    ObjectElement,\n    Password,\n    Phone,\n    RadiusPicker,\n    Radios,\n    Select,\n    Switch,\n    TagsSelect,\n    Textarea,\n    TreeSelect\n} from '../fields';\nimport {Grid, GridItem} from \"../../../_compat\";\nimport type {IStyleClasses} from \"@lmb-it/kitsconcerto-types\";\n\n// ... import all other field components\n\ninterface FormRendererProps<T extends FieldValues> extends GroupFieldConfigs<T> {\n    elements: IFormElement<T>[];\n    control: Control<T>;\n    getValues: UseFormGetValues<T>;\n    parentPath?: string; // ✨ Pass down the parent path for nesting\n    grid?: IStyleClasses;\n    focusedField?: string;\n    setFocusedField: React.Dispatch<React.SetStateAction<string>>;\n}\n\nexport const FormRenderer = <T extends FieldValues>({\n                                                        elements,\n                                                        control,\n                                                        getValues,\n                                                        groupField,\n                                                        grid = {},\n                                                        parentPath = '',\n                                                        focusedField, setFocusedField\n                                                    }: FormRendererProps<T>) => {\n\n    const [gridItemProps, setGridItemProps] = useState<Record<string, string>>({})\n\n    // --- Keyboard navigation ---\n    const TEXT_TYPES = ['Text', 'Email', 'Number', 'Password', 'Phone', 'Textarea'];\n    const textFieldIds = useMemo(() => {\n        return elements\n            .filter((el) => TEXT_TYPES.includes(el.type))\n            .map((el) => `${parentPath}${el.id as string}`);\n    }, [elements, parentPath]);\n\n    const keyboardNavCtx = useKeyboardNavProvider();\n\n    useEffect(() => {\n        keyboardNavCtx.setElementsOrder(textFieldIds);\n    }, [textFieldIds]);\n\n    const getElement = useCallback((elementType: string) => {\n\n        switch (elementType) {\n\n            case 'Email':\n            case 'Text':\n                return InputText;\n            case 'Number':\n                return InputNumber;\n            case 'Password':\n                return Password;\n            case 'Location':\n                return Location;\n            case 'Phone':\n                return Phone\n            case 'Date':\n                return DateField\n            case 'ColorPicker':\n                return ColorPicker\n            case 'RadiusPicker':\n                return RadiusPicker\n            case 'Radios':\n                return Radios\n            case 'Textarea':\n                return Textarea\n            case 'Image':\n            case 'File':\n                return FileUploader\n            case 'Switch':\n                return Switch\n            case 'Checkbox':\n                return Checkboxes\n            case 'Select':\n                return NormalSelect\n            case 'TreeSelect':\n                return TreeSelect\n            case 'Tags':\n                return TagsSelect\n            case 'ListBox':\n                return ListBox\n            case 'Multiselect':\n                return Select\n            case 'Group':\n                return Group\n            case 'Object':\n                return ObjectElement\n            case 'Container':\n                return ContainerElement\n            case 'Combined':\n                return CombinedElement\n            // default:\n            //     return <Flex/>;\n        }\n    }, []);\n\n\n    return (\n        <KeyboardNavContext.Provider value={keyboardNavCtx}>\n            <Grid\n                columns={12}\n                rowGap={6}\n                columnGap={8}\n            >\n                {elements.map((element) => {\n\n                    const FieldComponent = getElement(element.type);\n\n                    const elementId = `${parentPath}${element.id as string}`;\n                    const resolvedElement = elementId !== element.id ? { ...element, id: elementId } : element;\n\n\n                    if (!FieldComponent) {\n                        console.warn(`No component found for element type: \"${resolvedElement.type}\"`);\n                        return null;\n                    }\n\n                    const colSpan = parseInt(gridItemProps[elementId] ?? '12', 10);\n\n                    return (\n                        <GridItem\n                            key={elementId}\n                            id={elementId}\n                            colSpan={colSpan}\n                            /* The cell's own style — the stacking level an\n                               element config cannot otherwise reach. Sizing keys\n                               are forbidden by the type. */\n                            style={(resolvedElement as any).cellStyle}\n                        >\n                            <FieldWrapper\n                                key={elementId}\n                                element={resolvedElement}\n                                control={control}\n                                grid={grid}\n                                groupField={groupField}\n                                getValues={getValues}\n                                focusedField={focusedField}\n                                setFocusedField={setFocusedField}\n                                onGridChange={(value) => {\n                                    if (value != gridItemProps[elementId]) {\n                                        setGridItemProps(prevState => ({\n                                            ...prevState,\n                                            [elementId]: value\n                                        }));\n                                    }\n                                }}\n\n\n                            >\n                                {(props) => <FieldComponent\n                                    groupField={groupField}\n                                    element={resolvedElement}\n                                    control={control}\n                                    getValues={getValues}\n                                    focusedField={focusedField}\n                                    setFocusedField={setFocusedField}\n                                    fieldLogic={props}\n\n                                />}\n                            </FieldWrapper>\n                        </GridItem>\n                    );\n                })}\n            </Grid>\n        </KeyboardNavContext.Provider>\n    );\n};\n"],"names":["useState","useMemo","useKeyboardNavProvider","useEffect","useCallback","InputText","InputNumber","Password","Location","Phone","DateField","ColorPicker","RadiusPicker","Radios","Textarea","FileUploader","Switch","Checkboxes","NormalSelect","TreeSelect","TagsSelect","ListBox","Select","Group","ObjectElement","ContainerElement","CombinedElement","jsx","KeyboardNavContext","Grid","GridItem","FieldWrapper"],"mappings":"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"}

package/form-renderer/components/FormRenderer/index.js

@@ -107,39 +107,48 @@ const FormRenderer = ({
           return null;
         }
         const colSpan = parseInt(gridItemProps[elementId] ?? "12", 10);
-        return /* @__PURE__ */ jsx(KitsGridItem, { id: elementId, colSpan, children: /* @__PURE__ */ jsx(
-          FieldWrapper,
+        return /* @__PURE__ */ jsx(
+          KitsGridItem,
           {
-            element: resolvedElement,
-            control,
-            grid,
-            groupField,
-            getValues,
-            focusedField,
-            setFocusedField,
-            onGridChange: (value) => {
-              if (value != gridItemProps[elementId]) {
-                setGridItemProps((prevState) => ({
-                  ...prevState,
-                  [elementId]: value
-                }));
-              }
-            },
-            children: (props) => /* @__PURE__ */ jsx(
-              FieldComponent,
+            id: elementId,
+            colSpan,
+            style: resolvedElement.cellStyle,
+            children: /* @__PURE__ */ jsx(
+              FieldWrapper,
               {
-                groupField,
                 element: resolvedElement,
                 control,
+                grid,
+                groupField,
                 getValues,
                 focusedField,
                 setFocusedField,
-                fieldLogic: props
-              }
+                onGridChange: (value) => {
+                  if (value != gridItemProps[elementId]) {
+                    setGridItemProps((prevState) => ({
+                      ...prevState,
+                      [elementId]: value
+                    }));
+                  }
+                },
+                children: (props) => /* @__PURE__ */ jsx(
+                  FieldComponent,
+                  {
+                    groupField,
+                    element: resolvedElement,
+                    control,
+                    getValues,
+                    focusedField,
+                    setFocusedField,
+                    fieldLogic: props
+                  }
+                )
+              },
+              elementId
             )
           },
           elementId
-        ) }, elementId);
+        );
       })
     }
   ) });

package/form-renderer/components/FormRenderer/index.js.map

@@ -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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"}
+{"version":3,"file":"index.js","sources":["../../../../../src/form-renderer/components/FormRenderer/index.native.tsx"],"sourcesContent":["// components/FormRenderer.tsx\n\nimport React, {useCallback, useEffect, useMemo, useState} from 'react';\nimport type {Control, FieldValues, UseFormGetValues} from 'react-hook-form';\nimport type {GroupFieldConfigs, IFormElement} from '@lmb-it/kitsconcerto-types';\nimport {FieldWrapper} from '../layout/FieldWrapper';\nimport {KeyboardNavContext, useKeyboardNavProvider} from '../../../hooks/useKeyboardNavigation';\n\n// Import all your \"dumb\" field components\nimport {\n    Checkboxes,\n    ColorPicker,\n    CombinedElement,\n    ContainerElement,\n    DateField,\n    FileUploader,\n    Group,\n    InputNumber,\n    InputText,\n    ListBox,\n    Location,\n    NormalSelect,\n    ObjectElement,\n    Password,\n    Phone,\n    RadiusPicker,\n    Radios,\n    Select,\n    Switch,\n    TagsSelect,\n    Textarea,\n    TreeSelect\n} from '../fields';\nimport {Grid, GridItem} from \"../../../_compat\";\nimport type {IStyleClasses} from \"@lmb-it/kitsconcerto-types\";\n\n// ... import all other field components\n\ninterface FormRendererProps<T extends FieldValues> extends GroupFieldConfigs<T> {\n    elements: IFormElement<T>[];\n    control: Control<T>;\n    getValues: UseFormGetValues<T>;\n    parentPath?: string; // ✨ Pass down the parent path for nesting\n    grid?: IStyleClasses;\n    focusedField?: string;\n    setFocusedField: React.Dispatch<React.SetStateAction<string>>;\n}\n\nexport const FormRenderer = <T extends FieldValues>({\n                                                        elements,\n                                                        control,\n                                                        getValues,\n                                                        groupField,\n                                                        grid = {},\n                                                        parentPath = '',\n                                                        focusedField, setFocusedField\n                                                    }: FormRendererProps<T>) => {\n\n    const [gridItemProps, setGridItemProps] = useState<Record<string, string>>({})\n\n    // --- Keyboard navigation ---\n    const TEXT_TYPES = ['Text', 'Email', 'Number', 'Password', 'Phone', 'Textarea'];\n    const textFieldIds = useMemo(() => {\n        return elements\n            .filter((el) => TEXT_TYPES.includes(el.type))\n            .map((el) => `${parentPath}${el.id as string}`);\n    }, [elements, parentPath]);\n\n    const keyboardNavCtx = useKeyboardNavProvider();\n\n    useEffect(() => {\n        keyboardNavCtx.setElementsOrder(textFieldIds);\n    }, [textFieldIds]);\n\n    const getElement = useCallback((elementType: string) => {\n\n        switch (elementType) {\n\n            case 'Email':\n            case 'Text':\n                return InputText;\n            case 'Number':\n                return InputNumber;\n            case 'Password':\n                return Password;\n            case 'Location':\n                return Location;\n            case 'Phone':\n                return Phone\n            case 'Date':\n                return DateField\n            case 'ColorPicker':\n                return ColorPicker\n            case 'RadiusPicker':\n                return RadiusPicker\n            case 'Radios':\n                return Radios\n            case 'Textarea':\n                return Textarea\n            case 'Image':\n            case 'File':\n                return FileUploader\n            case 'Switch':\n                return Switch\n            case 'Checkbox':\n                return Checkboxes\n            case 'Select':\n                return NormalSelect\n            case 'TreeSelect':\n                return TreeSelect\n            case 'Tags':\n                return TagsSelect\n            case 'ListBox':\n                return ListBox\n            case 'Multiselect':\n                return Select\n            case 'Group':\n                return Group\n            case 'Object':\n                return ObjectElement\n            case 'Container':\n                return ContainerElement\n            case 'Combined':\n                return CombinedElement\n            // default:\n            //     return <Flex/>;\n        }\n    }, []);\n\n\n    return (\n        <KeyboardNavContext.Provider value={keyboardNavCtx}>\n            <Grid\n                columns={12}\n                rowGap={6}\n                columnGap={8}\n            >\n                {elements.map((element) => {\n\n                    const FieldComponent = getElement(element.type);\n\n                    const elementId = `${parentPath}${element.id as string}`;\n                    const resolvedElement = elementId !== element.id ? { ...element, id: elementId } : element;\n\n\n                    if (!FieldComponent) {\n                        console.warn(`No component found for element type: \"${resolvedElement.type}\"`);\n                        return null;\n                    }\n\n                    const colSpan = parseInt(gridItemProps[elementId] ?? '12', 10);\n\n                    return (\n                        <GridItem\n                            key={elementId}\n                            id={elementId}\n                            colSpan={colSpan}\n                            /* The cell's own style — the stacking level an\n                               element config cannot otherwise reach. Sizing keys\n                               are forbidden by the type. */\n                            style={(resolvedElement as any).cellStyle}\n                        >\n                            <FieldWrapper\n                                key={elementId}\n                                element={resolvedElement}\n                                control={control}\n                                grid={grid}\n                                groupField={groupField}\n                                getValues={getValues}\n                                focusedField={focusedField}\n                                setFocusedField={setFocusedField}\n                                onGridChange={(value) => {\n                                    if (value != gridItemProps[elementId]) {\n                                        setGridItemProps(prevState => ({\n                                            ...prevState,\n                                            [elementId]: value\n                                        }));\n                                    }\n                                }}\n\n\n                            >\n                                {(props) => <FieldComponent\n                                    groupField={groupField}\n                                    element={resolvedElement}\n                                    control={control}\n                                    getValues={getValues}\n                                    focusedField={focusedField}\n                                    setFocusedField={setFocusedField}\n                                    fieldLogic={props}\n\n                                />}\n                            </FieldWrapper>\n                        </GridItem>\n                    );\n                })}\n            </Grid>\n        </KeyboardNavContext.Provider>\n    );\n};\n"],"names":["NormalSelect","TreeSelect","TagsSelect","ListBox","ContainerElement","Grid","GridItem"],"mappings":"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"}

package/index.d.ts

@@ -1622,6 +1622,22 @@ export type IElementStyle = {
     helperText?: IStyleClasses;
     errorMessage?: IStyleClasses;
 };
+/**
+ * The style a form grid CELL may carry, with every key that decides its size
+ * removed.
+ *
+ * ⛔ THE GRID OWNS THE WIDTH. It measures its container, divides by `columns`,
+ * and hands each cell an exact pixel width. A caller who sets `width`, `flex`
+ * or `flexBasis` breaks that arithmetic for the whole ROW — flexbox then
+ * redistributes space the neighbouring cells were counting on, and the symptom
+ * appears on a SIBLING, nowhere near the line that caused it. Refusing them in
+ * the type is the only place that mistake is cheap.
+ *
+ * ⚠️ The short aliases go too (`w`, `minW`, `maxW`): they are the same keys
+ * under another name, and leaving them would make the ban look enforced while
+ * a one-letter spelling walked straight through it.
+ */
+export type IGridCellStyle = Omit<IStyleClasses, 'width' | 'minWidth' | 'maxWidth' | 'w' | 'minW' | 'maxW' | 'flex' | 'flexBasis' | 'flexGrow' | 'flexShrink'>;
 /** Core properties shared by all form elements. */
 export interface IElementBase<T extends FieldValues> {
     /** The unique identifier for the field. */
@@ -1665,6 +1681,30 @@ export interface IElementBase<T extends FieldValues> {
     /** Grid layout properties. */
     hideError?: boolean;
     displayOnly?: boolean;
+    /**
+     * Style for the field's GRID CELL — the wrapper the form grid puts around
+     * every element, outside the element's own `slots.container`.
+     *
+     * ⛔ THIS IS THE ONLY WAY TO REACH THAT LEVEL. A suggestion panel, a popover
+     * or a menu that opens out of its own field is painted UNDER the fields
+     * after it, because every cell sits at the default stacking level and the
+     * later ones simply paint last. `slots.container`, the element's own
+     * `zIndex` and the panel's own `zIndex` all order things INSIDE the cell,
+     * one level too deep to matter.
+     *
+     * ⚠️ SIZING KEYS ARE REFUSED BY THE TYPE — `width`, `minWidth`, `maxWidth`,
+     * `flex`, `flexBasis`, `flexGrow`, `flexShrink`. The grid hands each cell a
+     * measured pixel width, and overriding it breaks the arithmetic for the
+     * whole row, with the symptom appearing on a sibling.
+     *
+     * ⚠️ NOT THEME-RESOLVED. It is a plain React Native `ViewStyle`, applied
+     * after the cell's width. A token string lands as a literal string, so use
+     * it for `zIndex`, `elevation` and `overflow`, not for colours.
+     *
+     * ⚠️ NATIVE ONLY. On web the FieldWrapper owns the GridItem and already
+     * spreads the element's container style onto it.
+     */
+    cellStyle?: IGridCellStyle;
     /** When true, the molecule component renders without its KitsContainer wrapper (no label, no error). */
     attached?: boolean;
     placeholder?: DynamicValue<T, string>;
@@ -8283,11 +8323,41 @@ export interface IKitsGridProps {
  */
 declare const KitsGrid: ({ columns, columnGap, rowGap, children, }: IKitsGridProps) => React__default.JSX.Element;
 
+/**
+ * The style a grid cell may carry, with the keys that decide its SIZE removed.
+ *
+ * ⛔ `width`, `flex` AND `flexBasis` ARE FORBIDDEN BY THE TYPE, not merely
+ * discouraged. The grid measures its container, divides by `columns`, and hands
+ * every cell an exact pixel width. A caller who sets any of these breaks that
+ * arithmetic for the whole ROW, because flexbox then redistributes space the
+ * neighbouring cells were counting on — and the symptom shows up on a SIBLING,
+ * nowhere near the line that caused it. A compile error is the only place that
+ * mistake is cheap.
+ *
+ * ⚠️ `minWidth`, `maxWidth`, `flexGrow` and `flexShrink` go with them: each
+ * overrides a measured width without looking like it does.
+ */
+export type IKitsGridItemStyle = Omit<ViewStyle, 'width' | 'minWidth' | 'maxWidth' | 'flex' | 'flexBasis' | 'flexGrow' | 'flexShrink'>;
 export interface IKitsGridItemProps {
     /** Unique identifier — used for context registration. Auto-generated if omitted. */
     id?: string;
     /** Number of grid columns this item spans */
     colSpan: number;
+    /**
+     * Extra style for the cell, applied AFTER its measured width.
+     *
+     * ⛔ THIS IS THE STACKING LEVEL, AND NOTHING ELSE COULD REACH IT. Cells are
+     * siblings inside one flex-wrap row, so a panel that opens out of its own
+     * field — autocomplete suggestions, a popover, a menu — is painted UNDER
+     * every cell that comes after it. A `zIndex` on anything INSIDE the cell
+     * orders that thing within the cell and changes nothing outside it, and
+     * `FieldWrapper`'s own `zIndex: isFocused ? 1000 : undefined` is inside it
+     * too. Measured on a device: an address suggestion list drew its background,
+     * and the next field's label and box drew on top of it.
+     *
+     * ⚠️ Sizing keys are removed by the type — see `IKitsGridItemStyle`.
+     */
+    style?: IKitsGridItemStyle;
     children?: ReactNode;
 }
 /**
@@ -8299,7 +8369,7 @@ export interface IKitsGridItemProps {
  * Does NOT need to be a direct child of KitsGrid — context
  * handles communication regardless of hierarchy depth.
  */
-declare const KitsGridItem: ({ id: externalId, colSpan, children }: IKitsGridItemProps) => React__default.JSX.Element;
+declare const KitsGridItem: ({ id: externalId, colSpan, style, children, }: IKitsGridItemProps) => React__default.JSX.Element;
 
 declare const Flex: {
     ({ className, children, ref, ...props }: PropsWithChildren<IFlexComponent>): React__default.JSX.Element;
@@ -14917,4 +14987,4 @@ declare const localeFiles: {
 };
 
 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 };
-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 };
+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 };

package/layout/GridItem/native/KitsGridItem.cjs

@@ -7,7 +7,12 @@ var React = require('react');
 var reactNative = require('react-native');
 var GridContext = require('../../Grid/native/GridContext.cjs');
 
-const KitsGridItem = ({ id: externalId, colSpan, children }) => {
+const KitsGridItem = ({
+  id: externalId,
+  colSpan,
+  style,
+  children
+}) => {
   const autoId = React.useId();
   const id = externalId ?? autoId;
   const { registerItem, unregisterItem, getItemWidth, containerWidth } = GridContext.useGridContext();
@@ -24,7 +29,10 @@ const KitsGridItem = ({ id: externalId, colSpan, children }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactNative.View,
     {
-      style: measured ? { width, flexShrink: 0, flexGrow: 0 } : styles.fallback,
+      style: [
+        measured ? { width, flexShrink: 0, flexGrow: 0 } : styles.fallback,
+        style
+      ],
       children
     }
   );

package/layout/GridItem/native/KitsGridItem.cjs.map

@@ -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 = ({ id: externalId, colSpan, children }: 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      style={\n        measured\n          ? { width, flexShrink: 0, flexGrow: 0 }\n          : styles.fallback\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":";;;;;;;;;AAqBA,MAAM,eAAe,CAAC,EAAE,IAAI,UAAA,EAAY,OAAA,EAAS,UAAS,KAA0B;AAClF,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,MACC,KAAA,EACE,WACI,EAAE,KAAA,EAAO,YAAY,CAAA,EAAG,QAAA,EAAU,CAAA,EAAE,GACpC,MAAA,CAAO,QAAA;AAAA,MAGZ;AAAA;AAAA,GACH;AAEJ;AAEA,MAAM,MAAA,GAASC,uBAAW,MAAA,CAAO;AAAA,EAC/B,QAAA,EAAU;AAAA,IACR,KAAA,EAAO;AAAA;AAEX,CAAC,CAAA;;;;"}
+{"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;;;;"}

package/layout/GridItem/native/KitsGridItem.js

@@ -3,7 +3,12 @@ import { useId, useEffect } from 'react';
 import { View, StyleSheet } from 'react-native';
 import { useGridContext } from '../../Grid/native/GridContext.js';
 
-const KitsGridItem = ({ id: externalId, colSpan, children }) => {
+const KitsGridItem = ({
+  id: externalId,
+  colSpan,
+  style,
+  children
+}) => {
   const autoId = useId();
   const id = externalId ?? autoId;
   const { registerItem, unregisterItem, getItemWidth, containerWidth } = useGridContext();
@@ -20,7 +25,10 @@ const KitsGridItem = ({ id: externalId, colSpan, children }) => {
   return /* @__PURE__ */ jsx(
     View,
     {
-      style: measured ? { width, flexShrink: 0, flexGrow: 0 } : styles.fallback,
+      style: [
+        measured ? { width, flexShrink: 0, flexGrow: 0 } : styles.fallback,
+        style
+      ],
       children
     }
   );

package/layout/GridItem/native/KitsGridItem.js.map

@@ -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 = ({ id: externalId, colSpan, children }: 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      style={\n        measured\n          ? { width, flexShrink: 0, flexGrow: 0 }\n          : styles.fallback\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":";;;;;AAqBA,MAAM,eAAe,CAAC,EAAE,IAAI,UAAA,EAAY,OAAA,EAAS,UAAS,KAA0B;AAClF,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,MACC,KAAA,EACE,WACI,EAAE,KAAA,EAAO,YAAY,CAAA,EAAG,QAAA,EAAU,CAAA,EAAE,GACpC,MAAA,CAAO,QAAA;AAAA,MAGZ;AAAA;AAAA,GACH;AAEJ;AAEA,MAAM,MAAA,GAAS,WAAW,MAAA,CAAO;AAAA,EAC/B,QAAA,EAAU;AAAA,IACR,KAAA,EAAO;AAAA;AAEX,CAAC,CAAA;;;;"}
+{"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;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lmb-it/kitsconcerto-native",
-  "version": "0.1.268",
+  "version": "0.1.270",
   "description": "KitsConcerto — Native (React Native) UI components",
   "main": "index.cjs",
   "module": "index.js",