@lmb-it/kitsconcerto-native 0.1.288 → 0.1.290

package/form/selects/ListBox/index.js

@@ -61,6 +61,7 @@ import 'yup';
 import '../../../packages/types/src/Css/map/index.js';
 import '../../../packages/types/src/Theme/shadows.js';
 import '../../../packages/types/src/Theme/defaultTheme.js';
+import '../../../packages/types/src/Theme/resolvers.js';
 import '../../../packages/types/src/Theme/alphaColors.js';
 import '../../../apps/mobile/src/Factory/helpers/cssVarMap.js';
 import 'i18next';

package/form/selects/ListBox/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/form/selects/ListBox/index.native.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useState } from \"react\";\nimport { ScrollView, Pressable, TextInput } from \"react-native\";\nimport { VStack, Box, Text } from '../../../_compat';\nimport type { IListBoxSelect } from \"@lmb-it/kitsconcerto-types\";\nimport { useSelectBase } from \"../hooks/useSelectBase\";\nimport KitsContainer from \"../../helpers/FormContainer\";\nimport { resolveThemeTokenForNative } from \"@lmb-it/kitsconcertomobile\";\nimport { useComponentDefaults, useLanguage, useResolvedStyle } from \"@lmb-it/kitsconcerto/hooks\";\n\nconst KitsListBox = (rawProps: IListBoxSelect) => {\n    const { mergedProps: props, themeStyle, elementStyles } = useComponentDefaults('ListBox', rawProps, 'Select');\n    const resolvedThemeStyle = useResolvedStyle(themeStyle);\n    const resolvedRootStyle = useResolvedStyle(elementStyles?.root || {});\n    const {\n        id,\n        label,\n        disabled,\n        invalid,\n        errors,\n        helperText,\n        inputSize = \"md\",\n        isMultiple,\n        withFilter,\n        filterBy,\n        hideError,\n    } = props;\n\n    const { list, labelKey, valueKey, childrenKey, onChange, selectedValue } = useSelectBase();\n\n    const [filterText, setFilterText] = useState(\"\");\n\n    /* Same rule as the Dropdown's panel: the filter's copy and its edge come\n       from the reader's language, not from the platform's layout direction. */\n    const { t: translate, isRTL } = useLanguage();\n\n    const t = resolveThemeTokenForNative;\n    const primaryBg = t('highlight-bg') || t('primary.100') || '#E8EAF6';\n    const primaryText = t('primary.700') || '#303F9F';\n    const borderClr = invalid ? (t('danger') || '#EF4444') : (t('border') || '#D1D5DB');\n    const textColor = t('text') || '#1F2937';\n    const placeholderColor = t('text-secondary') || '#9CA3AF';\n    const groupBg = t('surface-ground') || '#F9FAFB';\n\n    const isSelected = useCallback((val: any) => {\n        if (isMultiple && Array.isArray(selectedValue)) {\n            return selectedValue.includes(val);\n        }\n        return selectedValue === val;\n    }, [isMultiple, selectedValue]);\n\n    const onSelect = useCallback((val: any, item: any) => {\n        if (isMultiple && Array.isArray(selectedValue)) {\n            const newVals = selectedValue.includes(val)\n                ? selectedValue.filter((v: any) => v !== val)\n                : [...selectedValue, val];\n            onChange({ target: { value: newVals } }, newVals);\n        } else {\n            onChange({ target: { value: val } }, item);\n        }\n    }, [isMultiple, selectedValue, onChange]);\n\n    const filteredList = useMemo(() => {\n        if (!withFilter || !filterText.trim()) return list;\n        const query = filterText.toLowerCase();\n        const searchKey = filterBy || labelKey;\n\n        if (childrenKey) {\n            return list.reduce((acc: any[], group: any) => {\n                const children = group[childrenKey];\n                if (Array.isArray(children)) {\n                    const matched = children.filter((item: any) =>\n                        String(item[searchKey] ?? \"\").toLowerCase().includes(query)\n                    );\n                    if (matched.length > 0) {\n                        acc.push({ ...group, [childrenKey]: matched });\n                    }\n                }\n                return acc;\n            }, []);\n        }\n\n        return list.filter((item: any) =>\n            String(item[searchKey] ?? \"\").toLowerCase().includes(query)\n        );\n    }, [list, filterText, withFilter, filterBy, labelKey, childrenKey]);\n\n    const renderItem = (item: any, index: number) => {\n        const val = item[valueKey];\n        const selected = isSelected(val);\n        return (\n            <Pressable\n                key={`${val}-${index}`}\n                style={{\n                    padding: 10,\n                    backgroundColor: selected ? primaryBg : 'transparent',\n                }}\n                onPress={() => !disabled && onSelect(val, item)}\n            >\n                <Text\n                    color={selected ? primaryText : textColor}\n                    fontWeight={selected ? \"bold\" : \"normal\"}\n                    size={inputSize}\n                >\n                    {item[labelKey]}\n                </Text>\n            </Pressable>\n        );\n    };\n\n    const renderGroupedItems = () => {\n        return filteredList.map((group: any, gi: number) => {\n            const children = group[childrenKey!];\n            if (!Array.isArray(children)) {\n                return renderItem(group, gi);\n            }\n            return (\n                <Box key={`group-${gi}`}>\n                    <Box style={{ backgroundColor: groupBg, paddingHorizontal: 12, paddingVertical: 8 }}>\n                        <Text fontWeight=\"600\" color={textColor} size={inputSize}>\n                            {group[labelKey]}\n                        </Text>\n                    </Box>\n                    {children.map((item: any, ci: number) => renderItem(item, ci))}\n                </Box>\n            );\n        });\n    };\n\n    return (\n        <KitsContainer\n            id={id}\n            label={label}\n            invalid={!!invalid}\n            hideError={hideError}\n            helperText={helperText}\n            errors={errors}\n            elementStyles={elementStyles}\n        >\n            <Box\n                borderWidth={1}\n                borderColor={borderClr}\n                borderRadius=\"$sm\"\n                height={250}\n                opacity={disabled ? 0.5 : 1}\n                style={resolvedRootStyle && Object.keys(resolvedRootStyle).length ? resolvedRootStyle : (Object.keys(resolvedThemeStyle).length ? resolvedThemeStyle : undefined)}\n            >\n                {withFilter && (\n                    <TextInput\n                        value={filterText}\n                        onChangeText={setFilterText}\n                        placeholder={translate('searchPlaceholder')}\n                        placeholderTextColor={placeholderColor}\n                        style={{\n                            borderBottomWidth: 1,\n                            borderBottomColor: borderClr,\n                            paddingHorizontal: 12,\n                            paddingVertical: 8,\n                            fontSize: 14,\n                            color: textColor,\n                            textAlign: isRTL ? 'right' : 'left',\n                            writingDirection: isRTL ? 'rtl' : 'ltr',\n                        }}\n                    />\n                )}\n                <ScrollView>\n                    <VStack>\n                        {childrenKey\n                            ? renderGroupedItems()\n                            : filteredList.map((item: any, i: number) => renderItem(item, i))\n                        }\n                    </VStack>\n                </ScrollView>\n            </Box>\n        </KitsContainer>\n    );\n};\n\nexport default KitsListBox;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../src/form/selects/ListBox/index.native.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useState } from \"react\";\nimport { ScrollView, Pressable, TextInput } from \"react-native\";\nimport { VStack, Box, Text } from '../../../_compat';\nimport type { IListBoxSelect } from \"@lmb-it/kitsconcerto-types\";\nimport { useSelectBase } from \"../hooks/useSelectBase\";\nimport KitsContainer from \"../../helpers/FormContainer\";\nimport { resolveThemeTokenForNative } from \"@lmb-it/kitsconcertomobile\";\nimport { useComponentDefaults, useLanguage, useResolvedStyle } from \"@lmb-it/kitsconcerto/hooks\";\n\nconst KitsListBox = (rawProps: IListBoxSelect) => {\n    const { mergedProps: props, themeStyle, elementStyles } = useComponentDefaults('ListBox', rawProps, 'Select');\n    const resolvedThemeStyle = useResolvedStyle(themeStyle);\n    const resolvedRootStyle = useResolvedStyle(elementStyles?.root || {});\n    const {\n        id,\n        label,\n        disabled,\n        invalid,\n        errors,\n        helperText,\n        inputSize = \"md\",\n        isMultiple,\n        withFilter,\n        filterBy,\n        hideError,\n    } = props;\n\n    const { list, labelKey, valueKey, childrenKey, onChange, selectedValue } = useSelectBase();\n\n    const [filterText, setFilterText] = useState(\"\");\n\n    /* Same rule as the Dropdown's panel: the filter's copy and its edge come\n       from the reader's language, not from the platform's layout direction. */\n    const { t: translate, isRTL } = useLanguage();\n\n    const t = resolveThemeTokenForNative;\n    const primaryBg = t('highlight-bg') || t('primary.100') || '#E8EAF6';\n    const primaryText = t('primary.700') || '#303F9F';\n    const borderClr = invalid ? (t('danger') || '#EF4444') : (t('border') || '#D1D5DB');\n    const textColor = t('text') || '#1F2937';\n    const placeholderColor = t('text-secondary') || '#9CA3AF';\n    const groupBg = t('surface-ground') || '#F9FAFB';\n\n    const isSelected = useCallback((val: any) => {\n        if (isMultiple && Array.isArray(selectedValue)) {\n            return selectedValue.includes(val);\n        }\n        return selectedValue === val;\n    }, [isMultiple, selectedValue]);\n\n    const onSelect = useCallback((val: any, item: any) => {\n        if (isMultiple && Array.isArray(selectedValue)) {\n            const newVals = selectedValue.includes(val)\n                ? selectedValue.filter((v: any) => v !== val)\n                : [...selectedValue, val];\n            onChange({ target: { value: newVals } }, newVals);\n        } else {\n            onChange({ target: { value: val } }, item);\n        }\n    }, [isMultiple, selectedValue, onChange]);\n\n    const filteredList = useMemo(() => {\n        if (!withFilter || !filterText.trim()) return list;\n        const query = filterText.toLowerCase();\n        const searchKey = filterBy || labelKey;\n\n        if (childrenKey) {\n            return list.reduce((acc: any[], group: any) => {\n                const children = group[childrenKey];\n                if (Array.isArray(children)) {\n                    const matched = children.filter((item: any) =>\n                        String(item[searchKey] ?? \"\").toLowerCase().includes(query)\n                    );\n                    if (matched.length > 0) {\n                        acc.push({ ...group, [childrenKey]: matched });\n                    }\n                }\n                return acc;\n            }, []);\n        }\n\n        return list.filter((item: any) =>\n            String(item[searchKey] ?? \"\").toLowerCase().includes(query)\n        );\n    }, [list, filterText, withFilter, filterBy, labelKey, childrenKey]);\n\n    const renderItem = (item: any, index: number) => {\n        const val = item[valueKey];\n        const selected = isSelected(val);\n        return (\n            <Pressable\n                key={`${val}-${index}`}\n                style={{\n                    padding: 10,\n                    backgroundColor: selected ? primaryBg : 'transparent',\n                }}\n                onPress={() => !disabled && onSelect(val, item)}\n            >\n                <Text\n                    color={selected ? primaryText : textColor}\n                    fontWeight={selected ? \"bold\" : \"normal\"}\n                    size={inputSize}\n                >\n                    {item[labelKey]}\n                </Text>\n            </Pressable>\n        );\n    };\n\n    const renderGroupedItems = () => {\n        return filteredList.map((group: any, gi: number) => {\n            const children = group[childrenKey!];\n            if (!Array.isArray(children)) {\n                return renderItem(group, gi);\n            }\n            return (\n                <Box key={`group-${gi}`}>\n                    <Box style={{ backgroundColor: groupBg, paddingHorizontal: 12, paddingVertical: 8 }}>\n                        <Text fontWeight=\"600\" color={textColor} size={inputSize}>\n                            {group[labelKey]}\n                        </Text>\n                    </Box>\n                    {children.map((item: any, ci: number) => renderItem(item, ci))}\n                </Box>\n            );\n        });\n    };\n\n    return (\n        <KitsContainer\n            id={id}\n            label={label}\n            invalid={!!invalid}\n            hideError={hideError}\n            helperText={helperText}\n            errors={errors}\n            elementStyles={elementStyles}\n        >\n            <Box\n                borderWidth={1}\n                borderColor={borderClr}\n                borderRadius=\"$sm\"\n                height={250}\n                opacity={disabled ? 0.5 : 1}\n                style={resolvedRootStyle && Object.keys(resolvedRootStyle).length ? resolvedRootStyle : (Object.keys(resolvedThemeStyle).length ? resolvedThemeStyle : undefined)}\n            >\n                {withFilter && (\n                    <TextInput\n                        value={filterText}\n                        onChangeText={setFilterText}\n                        placeholder={translate('searchPlaceholder')}\n                        placeholderTextColor={placeholderColor}\n                        style={{\n                            borderBottomWidth: 1,\n                            borderBottomColor: borderClr,\n                            paddingHorizontal: 12,\n                            paddingVertical: 8,\n                            fontSize: 14,\n                            color: textColor,\n                            textAlign: isRTL ? 'right' : 'left',\n                            writingDirection: isRTL ? 'rtl' : 'ltr',\n                        }}\n                    />\n                )}\n                <ScrollView>\n                    <VStack>\n                        {childrenKey\n                            ? renderGroupedItems()\n                            : filteredList.map((item: any, i: number) => renderItem(item, i))\n                        }\n                    </VStack>\n                </ScrollView>\n            </Box>\n        </KitsContainer>\n    );\n};\n\nexport default KitsListBox;\n"],"names":[],"mappings":"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"}

package/form/selects/MultiSelect/index.cjs

@@ -61,6 +61,7 @@ require('yup');
 require('../../../packages/types/src/Css/map/index.cjs');
 require('../../../packages/types/src/Theme/shadows.cjs');
 require('../../../packages/types/src/Theme/defaultTheme.cjs');
+require('../../../packages/types/src/Theme/resolvers.cjs');
 require('../../../packages/types/src/Theme/alphaColors.cjs');
 require('../../../apps/mobile/src/Factory/helpers/cssVarMap.cjs');
 require('../../../apps/mobile/src/Factory/DimensionsContext.cjs');

package/form/selects/MultiSelect/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../../src/form/selects/MultiSelect/index.native.tsx"],"sourcesContent":["import React, {useCallback, useEffect} from \"react\";\nimport {MultiSelect} from \"@lmb-it/kitsconcertomobile\";\nimport KitsContainer from \"../../helpers/FormContainer\";\nimport type {IMultiSelect} from \"@lmb-it/kitsconcerto-types\";\nimport {ClHelper} from \"../../helpers/Functions\";\nimport {checkKeys} from \"../helper\";\nimport {useSelectBase} from \"../hooks/useSelectBase\";\nimport {useComponentDefaults, useLanguage, useResolvedStyle} from \"@lmb-it/kitsconcerto/hooks\";\nimport {splitTextStyle} from \"@lmb-it/kitsconcerto/hooks/useResolvedStyle\";\nimport SelectPopupOverlay from \"../helpers/SelectPopupOverlay\";\nimport useThemedFont from \"@lmb-it/kitsconcerto/hooks/useThemedFont\";\n\nconst KitsMultiSelect = ({ className, ref, ...rawProps }: IMultiSelect) => {\n    const {mergedProps: props, themeStyle, elementStyles, elementProps} = useComponentDefaults('MultiSelect', rawProps, 'Select');\n    const resolvedThemeStyle = useResolvedStyle(themeStyle);\n    const resolvedRootStyle = useResolvedStyle(elementStyles?.root || {});\n    /* Chip slots — the same `Select.token` / `Select.tokenIcon` the web build\n       reads and the same the native Tags field reads. Split because a React\n       Native `View` cannot carry `color` / `fontSize`. */\n    const resolvedToken = useResolvedStyle(elementStyles?.token || {});\n    const resolvedTokenIcon = useResolvedStyle(elementStyles?.tokenIcon || {});\n    const {wrapper: tokenBoxStyle, text: tokenLabelStyle} = splitTextStyle(resolvedToken);\n    const {\n        id,\n        disabled,\n        isFloatedLabel,\n        rightAddon,\n        leftAddon,\n        required,\n        errors,\n        invalid,\n        placeholder,\n        virtualScroll,\n        label,\n        inputSize,\n        helperText,\n        emptyFilterMessage,\n        selectionLimit,\n        localProps,\n        hideError,\n        withFilter,\n        loading,\n        showClear,\n        valueMode,\n        popup,\n    } = props;\n\n    const { list, keys, onChange, selectedValue, childrenKey, labelKey, valueKey } = useSelectBase();\n\n    /* Same rule as the Dropdown's panel — see that file. The sentence and the\n       edge are resolved here, where LocaleContext is, and passed down. */\n    const { t, isRTL } = useLanguage();\n    const bodyFont = useThemedFont('body');\n\n    useEffect(() => {\n        checkKeys(list, labelKey, !childrenKey ? valueKey : undefined);\n    }, [list]);\n\n    const ClState = ClHelper({\n        inputSize: inputSize ?? \"\",\n        isChecked: false,\n        isInvalid: !!invalid,\n        isDisabled: !!disabled,\n    });\n\n    const handleChange = useCallback((e: any, items: any) => {\n        if (selectionLimit && Array.isArray(e?.target?.value) && e.target.value.length > selectionLimit) {\n            return;\n        }\n        onChange && onChange(e, items);\n    }, [selectionLimit, onChange]);\n\n    const Element = <MultiSelect\n        emptyFilterMessage={emptyFilterMessage ?? t('emptyFilterMessage')}\n        filterPlaceholder={t('searchPlaceholder')}\n        isRTL={isRTL}\n        fontFamily={bodyFont}\n        popup={popup}\n        popupTitle={label ?? placeholder}\n        renderPopup={({visible, onClose, title, children}: {\n                visible: boolean;\n                onClose: () => void;\n                title?: React.ReactNode;\n                children: React.ReactNode;\n            }) => (\n            <SelectPopupOverlay visible={visible} onClose={onClose} title={title}>\n                {children}\n            </SelectPopupOverlay>\n        )}\n        value={selectedValue}\n        onChange={handleChange}\n        disabled={disabled}\n        loading={loading}\n        showClear={showClear}\n        options={typeof list !== \"function\" ? list : []}\n        placeholder={placeholder}\n        {...keys}\n        filter={withFilter !== false}\n        selectionLimit={selectionLimit}\n        display={valueMode === \"comma\" ? \"comma\" : (localProps?.maxSelectedLabels ? undefined : \"chip\")}\n        maxSelectedLabels={selectionLimit ?? localProps?.maxSelectedLabels ?? 10}\n        className={`w-full ${ClState}`}\n        style={{ borderRadius: 0, ...(resolvedRootStyle && Object.keys(resolvedRootStyle).length > 0 ? resolvedRootStyle : resolvedThemeStyle) }}\n        tokenStyle={tokenBoxStyle}\n        tokenLabelStyle={tokenLabelStyle}\n        tokenIconStyle={resolvedTokenIcon}\n        {...(localProps ? localProps : {})}\n    />\n\n    return (\n        <KitsContainer\n            id={id}\n            inputSize={inputSize}\n            isFloatedLabel={isFloatedLabel}\n            rightAddon={rightAddon}\n            leftAddon={leftAddon}\n            required={required}\n            hideError={hideError}\n            errors={errors}\n            helperText={helperText}\n            invalid={invalid}\n            label={label}\n            elementStyles={elementStyles}\n            elementProps={elementProps}\n        >\n            {Element}\n        </KitsContainer>\n    );\n}\n\nKitsMultiSelect.displayName = \"MultiSelect\";\nexport default KitsMultiSelect;\n"],"names":["useComponentDefaults","useResolvedStyle","splitTextStyle","useSelectBase","useLanguage","useThemedFont","useEffect","checkKeys","ClHelper","useCallback","jsx","MultiSelect","SelectPopupOverlay","KitsContainer"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../../../src/form/selects/MultiSelect/index.native.tsx"],"sourcesContent":["import React, {useCallback, useEffect} from \"react\";\nimport {MultiSelect} from \"@lmb-it/kitsconcertomobile\";\nimport KitsContainer from \"../../helpers/FormContainer\";\nimport type {IMultiSelect} from \"@lmb-it/kitsconcerto-types\";\nimport {ClHelper} from \"../../helpers/Functions\";\nimport {checkKeys} from \"../helper\";\nimport {useSelectBase} from \"../hooks/useSelectBase\";\nimport {useComponentDefaults, useLanguage, useResolvedStyle} from \"@lmb-it/kitsconcerto/hooks\";\nimport {splitTextStyle} from \"@lmb-it/kitsconcerto/hooks/useResolvedStyle\";\nimport SelectPopupOverlay from \"../helpers/SelectPopupOverlay\";\nimport useThemedFont from \"@lmb-it/kitsconcerto/hooks/useThemedFont\";\n\nconst KitsMultiSelect = ({ className, ref, ...rawProps }: IMultiSelect) => {\n    const {mergedProps: props, themeStyle, elementStyles, elementProps} = useComponentDefaults('MultiSelect', rawProps, 'Select');\n    const resolvedThemeStyle = useResolvedStyle(themeStyle);\n    const resolvedRootStyle = useResolvedStyle(elementStyles?.root || {});\n    /* Chip slots — the same `Select.token` / `Select.tokenIcon` the web build\n       reads and the same the native Tags field reads. Split because a React\n       Native `View` cannot carry `color` / `fontSize`. */\n    const resolvedToken = useResolvedStyle(elementStyles?.token || {});\n    const resolvedTokenIcon = useResolvedStyle(elementStyles?.tokenIcon || {});\n    const {wrapper: tokenBoxStyle, text: tokenLabelStyle} = splitTextStyle(resolvedToken);\n    const {\n        id,\n        disabled,\n        isFloatedLabel,\n        rightAddon,\n        leftAddon,\n        required,\n        errors,\n        invalid,\n        placeholder,\n        virtualScroll,\n        label,\n        inputSize,\n        helperText,\n        emptyFilterMessage,\n        selectionLimit,\n        localProps,\n        hideError,\n        withFilter,\n        loading,\n        showClear,\n        valueMode,\n        popup,\n    } = props;\n\n    const { list, keys, onChange, selectedValue, childrenKey, labelKey, valueKey } = useSelectBase();\n\n    /* Same rule as the Dropdown's panel — see that file. The sentence and the\n       edge are resolved here, where LocaleContext is, and passed down. */\n    const { t, isRTL } = useLanguage();\n    const bodyFont = useThemedFont('body');\n\n    useEffect(() => {\n        checkKeys(list, labelKey, !childrenKey ? valueKey : undefined);\n    }, [list]);\n\n    const ClState = ClHelper({\n        inputSize: inputSize ?? \"\",\n        isChecked: false,\n        isInvalid: !!invalid,\n        isDisabled: !!disabled,\n    });\n\n    const handleChange = useCallback((e: any, items: any) => {\n        if (selectionLimit && Array.isArray(e?.target?.value) && e.target.value.length > selectionLimit) {\n            return;\n        }\n        onChange && onChange(e, items);\n    }, [selectionLimit, onChange]);\n\n    const Element = <MultiSelect\n        emptyFilterMessage={emptyFilterMessage ?? t('emptyFilterMessage')}\n        filterPlaceholder={t('searchPlaceholder')}\n        isRTL={isRTL}\n        fontFamily={bodyFont}\n        popup={popup}\n        popupTitle={label ?? placeholder}\n        renderPopup={({visible, onClose, title, children}: {\n                visible: boolean;\n                onClose: () => void;\n                title?: React.ReactNode;\n                children: React.ReactNode;\n            }) => (\n            <SelectPopupOverlay visible={visible} onClose={onClose} title={title}>\n                {children}\n            </SelectPopupOverlay>\n        )}\n        value={selectedValue}\n        onChange={handleChange}\n        disabled={disabled}\n        loading={loading}\n        showClear={showClear}\n        options={typeof list !== \"function\" ? list : []}\n        placeholder={placeholder}\n        {...keys}\n        filter={withFilter !== false}\n        selectionLimit={selectionLimit}\n        display={valueMode === \"comma\" ? \"comma\" : (localProps?.maxSelectedLabels ? undefined : \"chip\")}\n        maxSelectedLabels={selectionLimit ?? localProps?.maxSelectedLabels ?? 10}\n        className={`w-full ${ClState}`}\n        style={{ borderRadius: 0, ...(resolvedRootStyle && Object.keys(resolvedRootStyle).length > 0 ? resolvedRootStyle : resolvedThemeStyle) }}\n        tokenStyle={tokenBoxStyle}\n        tokenLabelStyle={tokenLabelStyle}\n        tokenIconStyle={resolvedTokenIcon}\n        {...(localProps ? localProps : {})}\n    />\n\n    return (\n        <KitsContainer\n            id={id}\n            inputSize={inputSize}\n            isFloatedLabel={isFloatedLabel}\n            rightAddon={rightAddon}\n            leftAddon={leftAddon}\n            required={required}\n            hideError={hideError}\n            errors={errors}\n            helperText={helperText}\n            invalid={invalid}\n            label={label}\n            elementStyles={elementStyles}\n            elementProps={elementProps}\n        >\n            {Element}\n        </KitsContainer>\n    );\n}\n\nKitsMultiSelect.displayName = \"MultiSelect\";\nexport default KitsMultiSelect;\n"],"names":["useComponentDefaults","useResolvedStyle","splitTextStyle","useSelectBase","useLanguage","useThemedFont","useEffect","checkKeys","ClHelper","useCallback","jsx","MultiSelect","SelectPopupOverlay","KitsContainer"],"mappings":"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"}

package/form/selects/MultiSelect/index.js

@@ -57,6 +57,7 @@ import 'yup';
 import '../../../packages/types/src/Css/map/index.js';
 import '../../../packages/types/src/Theme/shadows.js';
 import '../../../packages/types/src/Theme/defaultTheme.js';
+import '../../../packages/types/src/Theme/resolvers.js';
 import '../../../packages/types/src/Theme/alphaColors.js';
 import '../../../apps/mobile/src/Factory/helpers/cssVarMap.js';
 import '../../../apps/mobile/src/Factory/DimensionsContext.js';

package/form/selects/MultiSelect/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/form/selects/MultiSelect/index.native.tsx"],"sourcesContent":["import React, {useCallback, useEffect} from \"react\";\nimport {MultiSelect} from \"@lmb-it/kitsconcertomobile\";\nimport KitsContainer from \"../../helpers/FormContainer\";\nimport type {IMultiSelect} from \"@lmb-it/kitsconcerto-types\";\nimport {ClHelper} from \"../../helpers/Functions\";\nimport {checkKeys} from \"../helper\";\nimport {useSelectBase} from \"../hooks/useSelectBase\";\nimport {useComponentDefaults, useLanguage, useResolvedStyle} from \"@lmb-it/kitsconcerto/hooks\";\nimport {splitTextStyle} from \"@lmb-it/kitsconcerto/hooks/useResolvedStyle\";\nimport SelectPopupOverlay from \"../helpers/SelectPopupOverlay\";\nimport useThemedFont from \"@lmb-it/kitsconcerto/hooks/useThemedFont\";\n\nconst KitsMultiSelect = ({ className, ref, ...rawProps }: IMultiSelect) => {\n    const {mergedProps: props, themeStyle, elementStyles, elementProps} = useComponentDefaults('MultiSelect', rawProps, 'Select');\n    const resolvedThemeStyle = useResolvedStyle(themeStyle);\n    const resolvedRootStyle = useResolvedStyle(elementStyles?.root || {});\n    /* Chip slots — the same `Select.token` / `Select.tokenIcon` the web build\n       reads and the same the native Tags field reads. Split because a React\n       Native `View` cannot carry `color` / `fontSize`. */\n    const resolvedToken = useResolvedStyle(elementStyles?.token || {});\n    const resolvedTokenIcon = useResolvedStyle(elementStyles?.tokenIcon || {});\n    const {wrapper: tokenBoxStyle, text: tokenLabelStyle} = splitTextStyle(resolvedToken);\n    const {\n        id,\n        disabled,\n        isFloatedLabel,\n        rightAddon,\n        leftAddon,\n        required,\n        errors,\n        invalid,\n        placeholder,\n        virtualScroll,\n        label,\n        inputSize,\n        helperText,\n        emptyFilterMessage,\n        selectionLimit,\n        localProps,\n        hideError,\n        withFilter,\n        loading,\n        showClear,\n        valueMode,\n        popup,\n    } = props;\n\n    const { list, keys, onChange, selectedValue, childrenKey, labelKey, valueKey } = useSelectBase();\n\n    /* Same rule as the Dropdown's panel — see that file. The sentence and the\n       edge are resolved here, where LocaleContext is, and passed down. */\n    const { t, isRTL } = useLanguage();\n    const bodyFont = useThemedFont('body');\n\n    useEffect(() => {\n        checkKeys(list, labelKey, !childrenKey ? valueKey : undefined);\n    }, [list]);\n\n    const ClState = ClHelper({\n        inputSize: inputSize ?? \"\",\n        isChecked: false,\n        isInvalid: !!invalid,\n        isDisabled: !!disabled,\n    });\n\n    const handleChange = useCallback((e: any, items: any) => {\n        if (selectionLimit && Array.isArray(e?.target?.value) && e.target.value.length > selectionLimit) {\n            return;\n        }\n        onChange && onChange(e, items);\n    }, [selectionLimit, onChange]);\n\n    const Element = <MultiSelect\n        emptyFilterMessage={emptyFilterMessage ?? t('emptyFilterMessage')}\n        filterPlaceholder={t('searchPlaceholder')}\n        isRTL={isRTL}\n        fontFamily={bodyFont}\n        popup={popup}\n        popupTitle={label ?? placeholder}\n        renderPopup={({visible, onClose, title, children}: {\n                visible: boolean;\n                onClose: () => void;\n                title?: React.ReactNode;\n                children: React.ReactNode;\n            }) => (\n            <SelectPopupOverlay visible={visible} onClose={onClose} title={title}>\n                {children}\n            </SelectPopupOverlay>\n        )}\n        value={selectedValue}\n        onChange={handleChange}\n        disabled={disabled}\n        loading={loading}\n        showClear={showClear}\n        options={typeof list !== \"function\" ? list : []}\n        placeholder={placeholder}\n        {...keys}\n        filter={withFilter !== false}\n        selectionLimit={selectionLimit}\n        display={valueMode === \"comma\" ? \"comma\" : (localProps?.maxSelectedLabels ? undefined : \"chip\")}\n        maxSelectedLabels={selectionLimit ?? localProps?.maxSelectedLabels ?? 10}\n        className={`w-full ${ClState}`}\n        style={{ borderRadius: 0, ...(resolvedRootStyle && Object.keys(resolvedRootStyle).length > 0 ? resolvedRootStyle : resolvedThemeStyle) }}\n        tokenStyle={tokenBoxStyle}\n        tokenLabelStyle={tokenLabelStyle}\n        tokenIconStyle={resolvedTokenIcon}\n        {...(localProps ? localProps : {})}\n    />\n\n    return (\n        <KitsContainer\n            id={id}\n            inputSize={inputSize}\n            isFloatedLabel={isFloatedLabel}\n            rightAddon={rightAddon}\n            leftAddon={leftAddon}\n            required={required}\n            hideError={hideError}\n            errors={errors}\n            helperText={helperText}\n            invalid={invalid}\n            label={label}\n            elementStyles={elementStyles}\n            elementProps={elementProps}\n        >\n            {Element}\n        </KitsContainer>\n    );\n}\n\nKitsMultiSelect.displayName = \"MultiSelect\";\nexport default KitsMultiSelect;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,MAAM,kBAAkB,CAAC,EAAE,WAAW,GAAA,EAAK,GAAG,UAAS,KAAoB;AACvE,EAAA,MAAM,EAAC,WAAA,EAAa,KAAA,EAAO,UAAA,EAAY,aAAA,EAAe,cAAY,GAAI,oBAAA,CAAqB,aAAA,EAAe,QAAA,EAAU,QAAQ,CAAA;AAC5H,EAAA,MAAM,kBAAA,GAAqB,iBAAiB,UAAU,CAAA;AACtD,EAAA,MAAM,iBAAA,GAAoB,gBAAA,CAAiB,aAAA,EAAe,IAAA,IAAQ,EAAE,CAAA;AAIpE,EAAA,MAAM,aAAA,GAAgB,gBAAA,CAAiB,aAAA,EAAe,KAAA,IAAS,EAAE,CAAA;AACjE,EAAA,MAAM,iBAAA,GAAoB,gBAAA,CAAiB,aAAA,EAAe,SAAA,IAAa,EAAE,CAAA;AACzE,EAAA,MAAM,EAAC,OAAA,EAAS,aAAA,EAAe,MAAM,eAAA,EAAe,GAAI,eAAe,aAAa,CAAA;AACpF,EAAA,MAAM;AAAA,IACF,EAAA;AAAA,IACA,QAAA;AAAA,IACA,cAAA;AAAA,IACA,UAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,IACA,WAAA;AAAA,IACA,aAAA;AAAA,IACA,KAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAA;AAAA,IACA,kBAAA;AAAA,IACA,cAAA;AAAA,IACA,UAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,GACJ,GAAI,KAAA;AAEJ,EAAA,MAAM,EAAE,MAAM,IAAA,EAAM,QAAA,EAAU,eAAe,WAAA,EAAa,QAAA,EAAU,QAAA,EAAS,GAAI,aAAA,EAAc;AAI/F,EAAA,MAAM,EAAE,CAAA,EAAG,KAAA,EAAM,GAAI,WAAA,EAAY;AACjC,EAAA,MAAM,QAAA,GAAW,cAAc,MAAM,CAAA;AAErC,EAAA,SAAA,CAAU,MAAM;AACZ,IAAA,SAAA,CAAU,IAAA,EAAM,QAAA,EAAU,CAAC,WAAA,GAAc,WAAW,MAAS,CAAA;AAAA,EACjE,CAAA,EAAG,CAAC,IAAI,CAAC,CAAA;AAET,EAAA,MAAM,UAAU,QAAA,CAAS;AAAA,IACrB,WAAW,SAAA,IAAa,EAAA;AAAA,IACxB,SAAA,EAAW,KAAA;AAAA,IACX,SAAA,EAAW,CAAC,CAAC,OAAA;AAAA,IACb,UAAA,EAAY,CAAC,CAAC;AAAA,GACjB,CAAA;AAED,EAAA,MAAM,YAAA,GAAe,WAAA,CAAY,CAAC,CAAA,EAAQ,KAAA,KAAe;AACrD,IAAA,IAAI,cAAA,IAAkB,KAAA,CAAM,OAAA,CAAQ,CAAA,EAAG,MAAA,EAAQ,KAAK,CAAA,IAAK,CAAA,CAAE,MAAA,CAAO,KAAA,CAAM,MAAA,GAAS,cAAA,EAAgB;AAC7F,MAAA;AAAA,IACJ;AACA,IAAA,QAAA,IAAY,QAAA,CAAS,GAAG,KAAK,CAAA;AAAA,EACjC,CAAA,EAAG,CAAC,cAAA,EAAgB,QAAQ,CAAC,CAAA;AAE7B,EAAA,MAAM,OAAA,mBAAU,GAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACb,kBAAA,EAAoB,kBAAA,IAAsB,CAAA,CAAE,oBAAoB,CAAA;AAAA,MAChE,iBAAA,EAAmB,EAAE,mBAAmB,CAAA;AAAA,MACxC,KAAA;AAAA,MACA,UAAA,EAAY,QAAA;AAAA,MACZ,KAAA;AAAA,MACA,YAAY,KAAA,IAAS,WAAA;AAAA,MACrB,WAAA,EAAa,CAAC,EAAC,OAAA,EAAS,OAAA,EAAS,KAAA,EAAO,QAAA,EAAQ,qBAM5C,GAAA,CAAC,kBAAA,EAAA,EAAmB,OAAA,EAAkB,OAAA,EAAkB,OACnD,QAAA,EACL,CAAA;AAAA,MAEJ,KAAA,EAAO,aAAA;AAAA,MACP,QAAA,EAAU,YAAA;AAAA,MACV,QAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA;AAAA,MACA,OAAA,EAAS,OAAO,IAAA,KAAS,UAAA,GAAa,OAAO,EAAC;AAAA,MAC9C,WAAA;AAAA,MACC,GAAG,IAAA;AAAA,MACJ,QAAQ,UAAA,KAAe,KAAA;AAAA,MACvB,cAAA;AAAA,MACA,SAAS,SAAA,KAAc,OAAA,GAAU,OAAA,GAAW,UAAA,EAAY,oBAAoB,MAAA,GAAY,MAAA;AAAA,MACxF,iBAAA,EAAmB,cAAA,IAAkB,UAAA,EAAY,iBAAA,IAAqB,EAAA;AAAA,MACtE,SAAA,EAAW,UAAU,OAAO,CAAA,CAAA;AAAA,MAC5B,KAAA,EAAO,EAAE,YAAA,EAAc,CAAA,EAAG,GAAI,iBAAA,IAAqB,MAAA,CAAO,IAAA,CAAK,iBAAiB,CAAA,CAAE,MAAA,GAAS,CAAA,GAAI,oBAAoB,kBAAA,EAAoB;AAAA,MACvI,UAAA,EAAY,aAAA;AAAA,MACZ,eAAA;AAAA,MACA,cAAA,EAAgB,iBAAA;AAAA,MACf,GAAI,UAAA,GAAa,UAAA,GAAa;AAAC;AAAA,GACpC;AAEA,EAAA,uBACI,GAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACG,EAAA;AAAA,MACA,SAAA;AAAA,MACA,cAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,OAAA;AAAA,MACA,KAAA;AAAA,MACA,aAAA;AAAA,MACA,YAAA;AAAA,MAEC,QAAA,EAAA;AAAA;AAAA,GACL;AAER;AAEA,eAAA,CAAgB,WAAA,GAAc,aAAA;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../src/form/selects/MultiSelect/index.native.tsx"],"sourcesContent":["import React, {useCallback, useEffect} from \"react\";\nimport {MultiSelect} from \"@lmb-it/kitsconcertomobile\";\nimport KitsContainer from \"../../helpers/FormContainer\";\nimport type {IMultiSelect} from \"@lmb-it/kitsconcerto-types\";\nimport {ClHelper} from \"../../helpers/Functions\";\nimport {checkKeys} from \"../helper\";\nimport {useSelectBase} from \"../hooks/useSelectBase\";\nimport {useComponentDefaults, useLanguage, useResolvedStyle} from \"@lmb-it/kitsconcerto/hooks\";\nimport {splitTextStyle} from \"@lmb-it/kitsconcerto/hooks/useResolvedStyle\";\nimport SelectPopupOverlay from \"../helpers/SelectPopupOverlay\";\nimport useThemedFont from \"@lmb-it/kitsconcerto/hooks/useThemedFont\";\n\nconst KitsMultiSelect = ({ className, ref, ...rawProps }: IMultiSelect) => {\n    const {mergedProps: props, themeStyle, elementStyles, elementProps} = useComponentDefaults('MultiSelect', rawProps, 'Select');\n    const resolvedThemeStyle = useResolvedStyle(themeStyle);\n    const resolvedRootStyle = useResolvedStyle(elementStyles?.root || {});\n    /* Chip slots — the same `Select.token` / `Select.tokenIcon` the web build\n       reads and the same the native Tags field reads. Split because a React\n       Native `View` cannot carry `color` / `fontSize`. */\n    const resolvedToken = useResolvedStyle(elementStyles?.token || {});\n    const resolvedTokenIcon = useResolvedStyle(elementStyles?.tokenIcon || {});\n    const {wrapper: tokenBoxStyle, text: tokenLabelStyle} = splitTextStyle(resolvedToken);\n    const {\n        id,\n        disabled,\n        isFloatedLabel,\n        rightAddon,\n        leftAddon,\n        required,\n        errors,\n        invalid,\n        placeholder,\n        virtualScroll,\n        label,\n        inputSize,\n        helperText,\n        emptyFilterMessage,\n        selectionLimit,\n        localProps,\n        hideError,\n        withFilter,\n        loading,\n        showClear,\n        valueMode,\n        popup,\n    } = props;\n\n    const { list, keys, onChange, selectedValue, childrenKey, labelKey, valueKey } = useSelectBase();\n\n    /* Same rule as the Dropdown's panel — see that file. The sentence and the\n       edge are resolved here, where LocaleContext is, and passed down. */\n    const { t, isRTL } = useLanguage();\n    const bodyFont = useThemedFont('body');\n\n    useEffect(() => {\n        checkKeys(list, labelKey, !childrenKey ? valueKey : undefined);\n    }, [list]);\n\n    const ClState = ClHelper({\n        inputSize: inputSize ?? \"\",\n        isChecked: false,\n        isInvalid: !!invalid,\n        isDisabled: !!disabled,\n    });\n\n    const handleChange = useCallback((e: any, items: any) => {\n        if (selectionLimit && Array.isArray(e?.target?.value) && e.target.value.length > selectionLimit) {\n            return;\n        }\n        onChange && onChange(e, items);\n    }, [selectionLimit, onChange]);\n\n    const Element = <MultiSelect\n        emptyFilterMessage={emptyFilterMessage ?? t('emptyFilterMessage')}\n        filterPlaceholder={t('searchPlaceholder')}\n        isRTL={isRTL}\n        fontFamily={bodyFont}\n        popup={popup}\n        popupTitle={label ?? placeholder}\n        renderPopup={({visible, onClose, title, children}: {\n                visible: boolean;\n                onClose: () => void;\n                title?: React.ReactNode;\n                children: React.ReactNode;\n            }) => (\n            <SelectPopupOverlay visible={visible} onClose={onClose} title={title}>\n                {children}\n            </SelectPopupOverlay>\n        )}\n        value={selectedValue}\n        onChange={handleChange}\n        disabled={disabled}\n        loading={loading}\n        showClear={showClear}\n        options={typeof list !== \"function\" ? list : []}\n        placeholder={placeholder}\n        {...keys}\n        filter={withFilter !== false}\n        selectionLimit={selectionLimit}\n        display={valueMode === \"comma\" ? \"comma\" : (localProps?.maxSelectedLabels ? undefined : \"chip\")}\n        maxSelectedLabels={selectionLimit ?? localProps?.maxSelectedLabels ?? 10}\n        className={`w-full ${ClState}`}\n        style={{ borderRadius: 0, ...(resolvedRootStyle && Object.keys(resolvedRootStyle).length > 0 ? resolvedRootStyle : resolvedThemeStyle) }}\n        tokenStyle={tokenBoxStyle}\n        tokenLabelStyle={tokenLabelStyle}\n        tokenIconStyle={resolvedTokenIcon}\n        {...(localProps ? localProps : {})}\n    />\n\n    return (\n        <KitsContainer\n            id={id}\n            inputSize={inputSize}\n            isFloatedLabel={isFloatedLabel}\n            rightAddon={rightAddon}\n            leftAddon={leftAddon}\n            required={required}\n            hideError={hideError}\n            errors={errors}\n            helperText={helperText}\n            invalid={invalid}\n            label={label}\n            elementStyles={elementStyles}\n            elementProps={elementProps}\n        >\n            {Element}\n        </KitsContainer>\n    );\n}\n\nKitsMultiSelect.displayName = \"MultiSelect\";\nexport default KitsMultiSelect;\n"],"names":[],"mappings":"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"}

package/form/selects/TreeSelect/index.cjs

@@ -62,6 +62,7 @@ require('yup');
 require('../../../packages/types/src/Css/map/index.cjs');
 require('../../../packages/types/src/Theme/shadows.cjs');
 require('../../../packages/types/src/Theme/defaultTheme.cjs');
+require('../../../packages/types/src/Theme/resolvers.cjs');
 require('../../../packages/types/src/Theme/alphaColors.cjs');
 require('../../../apps/mobile/src/Factory/helpers/cssVarMap.cjs');
 require('../../../apps/mobile/src/Factory/DimensionsContext.cjs');

package/form/selects/TreeSelect/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../../src/form/selects/TreeSelect/index.native.tsx"],"sourcesContent":["import React from \"react\";\nimport KitsContainer from \"../../helpers/FormContainer\";\nimport type { ITreeSelect } from \"@lmb-it/kitsconcerto-types\";\nimport { TreeSelect } from \"@lmb-it/kitsconcertomobile\";\nimport { ClHelper } from \"../../helpers/Functions\";\nimport { useTreeBuild } from \"../hooks/useTreeBuild\";\nimport { useComponentDefaults, useResolvedStyle } from \"@lmb-it/kitsconcerto/hooks\";\n\nconst KitsTreeSelect = <T = any,>({ ref, ...rawProps }: ITreeSelect) => {\n    const { mergedProps: props, themeStyle, elementStyles } = useComponentDefaults('TreeSelect', rawProps, 'Select');\n    const resolvedThemeStyle = useResolvedStyle(themeStyle);\n    const resolvedRootStyle = useResolvedStyle(elementStyles?.root || {});\n    const {\n        rightAddon,\n        leftAddon,\n        errors,\n        invalid,\n        label,\n        id,\n        placeholder,\n        required,\n        disabled,\n        helperText,\n        attached,\n        isFloatedLabel,\n        inputSize,\n        valueMode,\n        isMultiple,\n        localProps,\n        withFilter,\n        filterBy,\n        hideError,\n        onlyParentsWithChildren,\n        resetFilterOnHide,\n        scrollHeight,\n        emptyMessage,\n        showClear,\n        containerStyle,\n    } = props;\n\n    const { nodes, value, handleChange } = useTreeBuild<T>({\n        isStructured: props.isStructured,\n        ref,\n    });\n\n\n\n    const Element = (\n        <TreeSelect\n            value={value}\n            filter={withFilter}\n            filterBy={filterBy}\n            options={nodes}\n            display={isMultiple ? valueMode : \"comma\"}\n            onChange={handleChange}\n            selectionMode={isMultiple ? 'checkbox' : 'single'}\n            placeholder={placeholder}\n            disabled={disabled}\n            invalid={invalid}\n            showClear={showClear ?? !required}\n            isModal={false}\n            onlyParentsWithChildren={onlyParentsWithChildren}\n            resetFilterOnHide={resetFilterOnHide}\n            scrollHeight={scrollHeight}\n            emptyMessage={emptyMessage}\n            style={resolvedRootStyle && Object.keys(resolvedRootStyle).length ? resolvedRootStyle : (Object.keys(resolvedThemeStyle).length ? resolvedThemeStyle : undefined)}\n            {...localProps}\n        />\n    );\n\n    if (attached) {\n        return Element;\n    }\n\n    return (\n        <KitsContainer\n            id={id}\n            inputSize={inputSize}\n            isFloatedLabel={isFloatedLabel}\n            rightAddon={rightAddon}\n            leftAddon={leftAddon}\n            required={required}\n            hideError={hideError}\n            errors={errors}\n            helperText={helperText}\n            invalid={invalid}\n            label={label}\n            containerStyle={containerStyle}\n            elementStyles={elementStyles}\n        >\n            {Element}\n        </KitsContainer>\n    );\n}\nexport default KitsTreeSelect;\n"],"names":["useComponentDefaults","useResolvedStyle","useTreeBuild","jsx","TreeSelect","KitsContainer"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,MAAM,iBAAiB,CAAW,EAAE,GAAA,EAAK,GAAG,UAAS,KAAmB;AACpE,EAAA,MAAM,EAAE,aAAa,KAAA,EAAO,UAAA,EAAY,eAAc,GAAIA,4BAAA,CAAqB,YAAA,EAAc,QAAA,EAAU,QAAQ,CAAA;AAC/G,EAAA,MAAM,kBAAA,GAAqBC,yBAAiB,UAAU,CAAA;AACtD,EAAA,MAAM,iBAAA,GAAoBA,wBAAA,CAAiB,aAAA,EAAe,IAAA,IAAQ,EAAE,CAAA;AACpE,EAAA,MAAM;AAAA,IACF,UAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,IACA,KAAA;AAAA,IACA,EAAA;AAAA,IACA,WAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,QAAA;AAAA,IACA,cAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,uBAAA;AAAA,IACA,iBAAA;AAAA,IACA,YAAA;AAAA,IACA,YAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,GACJ,GAAI,KAAA;AAEJ,EAAA,MAAM,EAAE,KAAA,EAAO,KAAA,EAAO,YAAA,KAAiBC,yBAAA,CAAgB;AAAA,IACnD,cAAc,KAAA,CAAM,YAAA;AAAA,IACpB;AAAA,GACH,CAAA;AAID,EAAA,MAAM,OAAA,mBACFC,cAAA;AAAA,IAACC,sBAAA;AAAA,IAAA;AAAA,MACG,KAAA;AAAA,MACA,MAAA,EAAQ,UAAA;AAAA,MACR,QAAA;AAAA,MACA,OAAA,EAAS,KAAA;AAAA,MACT,OAAA,EAAS,aAAa,SAAA,GAAY,OAAA;AAAA,MAClC,QAAA,EAAU,YAAA;AAAA,MACV,aAAA,EAAe,aAAa,UAAA,GAAa,QAAA;AAAA,MACzC,WAAA;AAAA,MACA,QAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA,EAAW,aAAa,CAAC,QAAA;AAAA,MACzB,OAAA,EAAS,KAAA;AAAA,MACT,uBAAA;AAAA,MACA,iBAAA;AAAA,MACA,YAAA;AAAA,MACA,YAAA;AAAA,MACA,KAAA,EAAO,iBAAA,IAAqB,MAAA,CAAO,IAAA,CAAK,iBAAiB,CAAA,CAAE,MAAA,GAAS,iBAAA,GAAqB,MAAA,CAAO,IAAA,CAAK,kBAAkB,CAAA,CAAE,SAAS,kBAAA,GAAqB,MAAA;AAAA,MACtJ,GAAG;AAAA;AAAA,GACR;AAGJ,EAAA,IAAI,QAAA,EAAU;AACV,IAAA,OAAO,OAAA;AAAA,EACX;AAEA,EAAA,uBACID,cAAA;AAAA,IAACE,oBAAA;AAAA,IAAA;AAAA,MACG,EAAA;AAAA,MACA,SAAA;AAAA,MACA,cAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,OAAA;AAAA,MACA,KAAA;AAAA,MACA,cAAA;AAAA,MACA,aAAA;AAAA,MAEC,QAAA,EAAA;AAAA;AAAA,GACL;AAER;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../../../src/form/selects/TreeSelect/index.native.tsx"],"sourcesContent":["import React from \"react\";\nimport KitsContainer from \"../../helpers/FormContainer\";\nimport type { ITreeSelect } from \"@lmb-it/kitsconcerto-types\";\nimport { TreeSelect } from \"@lmb-it/kitsconcertomobile\";\nimport { ClHelper } from \"../../helpers/Functions\";\nimport { useTreeBuild } from \"../hooks/useTreeBuild\";\nimport { useComponentDefaults, useResolvedStyle } from \"@lmb-it/kitsconcerto/hooks\";\n\nconst KitsTreeSelect = <T = any,>({ ref, ...rawProps }: ITreeSelect) => {\n    const { mergedProps: props, themeStyle, elementStyles } = useComponentDefaults('TreeSelect', rawProps, 'Select');\n    const resolvedThemeStyle = useResolvedStyle(themeStyle);\n    const resolvedRootStyle = useResolvedStyle(elementStyles?.root || {});\n    const {\n        rightAddon,\n        leftAddon,\n        errors,\n        invalid,\n        label,\n        id,\n        placeholder,\n        required,\n        disabled,\n        helperText,\n        attached,\n        isFloatedLabel,\n        inputSize,\n        valueMode,\n        isMultiple,\n        localProps,\n        withFilter,\n        filterBy,\n        hideError,\n        onlyParentsWithChildren,\n        resetFilterOnHide,\n        scrollHeight,\n        emptyMessage,\n        showClear,\n        containerStyle,\n    } = props;\n\n    const { nodes, value, handleChange } = useTreeBuild<T>({\n        isStructured: props.isStructured,\n        ref,\n    });\n\n\n\n    const Element = (\n        <TreeSelect\n            value={value}\n            filter={withFilter}\n            filterBy={filterBy}\n            options={nodes}\n            display={isMultiple ? valueMode : \"comma\"}\n            onChange={handleChange}\n            selectionMode={isMultiple ? 'checkbox' : 'single'}\n            placeholder={placeholder}\n            disabled={disabled}\n            invalid={invalid}\n            showClear={showClear ?? !required}\n            isModal={false}\n            onlyParentsWithChildren={onlyParentsWithChildren}\n            resetFilterOnHide={resetFilterOnHide}\n            scrollHeight={scrollHeight}\n            emptyMessage={emptyMessage}\n            style={resolvedRootStyle && Object.keys(resolvedRootStyle).length ? resolvedRootStyle : (Object.keys(resolvedThemeStyle).length ? resolvedThemeStyle : undefined)}\n            {...localProps}\n        />\n    );\n\n    if (attached) {\n        return Element;\n    }\n\n    return (\n        <KitsContainer\n            id={id}\n            inputSize={inputSize}\n            isFloatedLabel={isFloatedLabel}\n            rightAddon={rightAddon}\n            leftAddon={leftAddon}\n            required={required}\n            hideError={hideError}\n            errors={errors}\n            helperText={helperText}\n            invalid={invalid}\n            label={label}\n            containerStyle={containerStyle}\n            elementStyles={elementStyles}\n        >\n            {Element}\n        </KitsContainer>\n    );\n}\nexport default KitsTreeSelect;\n"],"names":["useComponentDefaults","useResolvedStyle","useTreeBuild","jsx","TreeSelect","KitsContainer"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,MAAM,iBAAiB,CAAW,EAAE,GAAA,EAAK,GAAG,UAAS,KAAmB;AACpE,EAAA,MAAM,EAAE,aAAa,KAAA,EAAO,UAAA,EAAY,eAAc,GAAIA,4BAAA,CAAqB,YAAA,EAAc,QAAA,EAAU,QAAQ,CAAA;AAC/G,EAAA,MAAM,kBAAA,GAAqBC,yBAAiB,UAAU,CAAA;AACtD,EAAA,MAAM,iBAAA,GAAoBA,wBAAA,CAAiB,aAAA,EAAe,IAAA,IAAQ,EAAE,CAAA;AACpE,EAAA,MAAM;AAAA,IACF,UAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,IACA,KAAA;AAAA,IACA,EAAA;AAAA,IACA,WAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,QAAA;AAAA,IACA,cAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,uBAAA;AAAA,IACA,iBAAA;AAAA,IACA,YAAA;AAAA,IACA,YAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,GACJ,GAAI,KAAA;AAEJ,EAAA,MAAM,EAAE,KAAA,EAAO,KAAA,EAAO,YAAA,KAAiBC,yBAAA,CAAgB;AAAA,IACnD,cAAc,KAAA,CAAM,YAAA;AAAA,IACpB;AAAA,GACH,CAAA;AAID,EAAA,MAAM,OAAA,mBACFC,cAAA;AAAA,IAACC,sBAAA;AAAA,IAAA;AAAA,MACG,KAAA;AAAA,MACA,MAAA,EAAQ,UAAA;AAAA,MACR,QAAA;AAAA,MACA,OAAA,EAAS,KAAA;AAAA,MACT,OAAA,EAAS,aAAa,SAAA,GAAY,OAAA;AAAA,MAClC,QAAA,EAAU,YAAA;AAAA,MACV,aAAA,EAAe,aAAa,UAAA,GAAa,QAAA;AAAA,MACzC,WAAA;AAAA,MACA,QAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA,EAAW,aAAa,CAAC,QAAA;AAAA,MACzB,OAAA,EAAS,KAAA;AAAA,MACT,uBAAA;AAAA,MACA,iBAAA;AAAA,MACA,YAAA;AAAA,MACA,YAAA;AAAA,MACA,KAAA,EAAO,iBAAA,IAAqB,MAAA,CAAO,IAAA,CAAK,iBAAiB,CAAA,CAAE,MAAA,GAAS,iBAAA,GAAqB,MAAA,CAAO,IAAA,CAAK,kBAAkB,CAAA,CAAE,SAAS,kBAAA,GAAqB,MAAA;AAAA,MACtJ,GAAG;AAAA;AAAA,GACR;AAGJ,EAAA,IAAI,QAAA,EAAU;AACV,IAAA,OAAO,OAAA;AAAA,EACX;AAEA,EAAA,uBACID,cAAA;AAAA,IAACE,oBAAA;AAAA,IAAA;AAAA,MACG,EAAA;AAAA,MACA,SAAA;AAAA,MACA,cAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,OAAA;AAAA,MACA,KAAA;AAAA,MACA,cAAA;AAAA,MACA,aAAA;AAAA,MAEC,QAAA,EAAA;AAAA;AAAA,GACL;AAER;;;;"}

package/form/selects/TreeSelect/index.js

@@ -58,6 +58,7 @@ import 'yup';
 import '../../../packages/types/src/Css/map/index.js';
 import '../../../packages/types/src/Theme/shadows.js';
 import '../../../packages/types/src/Theme/defaultTheme.js';
+import '../../../packages/types/src/Theme/resolvers.js';
 import '../../../packages/types/src/Theme/alphaColors.js';
 import '../../../apps/mobile/src/Factory/helpers/cssVarMap.js';
 import '../../../apps/mobile/src/Factory/DimensionsContext.js';

package/form/selects/TreeSelect/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/form/selects/TreeSelect/index.native.tsx"],"sourcesContent":["import React from \"react\";\nimport KitsContainer from \"../../helpers/FormContainer\";\nimport type { ITreeSelect } from \"@lmb-it/kitsconcerto-types\";\nimport { TreeSelect } from \"@lmb-it/kitsconcertomobile\";\nimport { ClHelper } from \"../../helpers/Functions\";\nimport { useTreeBuild } from \"../hooks/useTreeBuild\";\nimport { useComponentDefaults, useResolvedStyle } from \"@lmb-it/kitsconcerto/hooks\";\n\nconst KitsTreeSelect = <T = any,>({ ref, ...rawProps }: ITreeSelect) => {\n    const { mergedProps: props, themeStyle, elementStyles } = useComponentDefaults('TreeSelect', rawProps, 'Select');\n    const resolvedThemeStyle = useResolvedStyle(themeStyle);\n    const resolvedRootStyle = useResolvedStyle(elementStyles?.root || {});\n    const {\n        rightAddon,\n        leftAddon,\n        errors,\n        invalid,\n        label,\n        id,\n        placeholder,\n        required,\n        disabled,\n        helperText,\n        attached,\n        isFloatedLabel,\n        inputSize,\n        valueMode,\n        isMultiple,\n        localProps,\n        withFilter,\n        filterBy,\n        hideError,\n        onlyParentsWithChildren,\n        resetFilterOnHide,\n        scrollHeight,\n        emptyMessage,\n        showClear,\n        containerStyle,\n    } = props;\n\n    const { nodes, value, handleChange } = useTreeBuild<T>({\n        isStructured: props.isStructured,\n        ref,\n    });\n\n\n\n    const Element = (\n        <TreeSelect\n            value={value}\n            filter={withFilter}\n            filterBy={filterBy}\n            options={nodes}\n            display={isMultiple ? valueMode : \"comma\"}\n            onChange={handleChange}\n            selectionMode={isMultiple ? 'checkbox' : 'single'}\n            placeholder={placeholder}\n            disabled={disabled}\n            invalid={invalid}\n            showClear={showClear ?? !required}\n            isModal={false}\n            onlyParentsWithChildren={onlyParentsWithChildren}\n            resetFilterOnHide={resetFilterOnHide}\n            scrollHeight={scrollHeight}\n            emptyMessage={emptyMessage}\n            style={resolvedRootStyle && Object.keys(resolvedRootStyle).length ? resolvedRootStyle : (Object.keys(resolvedThemeStyle).length ? resolvedThemeStyle : undefined)}\n            {...localProps}\n        />\n    );\n\n    if (attached) {\n        return Element;\n    }\n\n    return (\n        <KitsContainer\n            id={id}\n            inputSize={inputSize}\n            isFloatedLabel={isFloatedLabel}\n            rightAddon={rightAddon}\n            leftAddon={leftAddon}\n            required={required}\n            hideError={hideError}\n            errors={errors}\n            helperText={helperText}\n            invalid={invalid}\n            label={label}\n            containerStyle={containerStyle}\n            elementStyles={elementStyles}\n        >\n            {Element}\n        </KitsContainer>\n    );\n}\nexport default KitsTreeSelect;\n"],"names":["TreeSelect"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,MAAM,iBAAiB,CAAW,EAAE,GAAA,EAAK,GAAG,UAAS,KAAmB;AACpE,EAAA,MAAM,EAAE,aAAa,KAAA,EAAO,UAAA,EAAY,eAAc,GAAI,oBAAA,CAAqB,YAAA,EAAc,QAAA,EAAU,QAAQ,CAAA;AAC/G,EAAA,MAAM,kBAAA,GAAqB,iBAAiB,UAAU,CAAA;AACtD,EAAA,MAAM,iBAAA,GAAoB,gBAAA,CAAiB,aAAA,EAAe,IAAA,IAAQ,EAAE,CAAA;AACpE,EAAA,MAAM;AAAA,IACF,UAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,IACA,KAAA;AAAA,IACA,EAAA;AAAA,IACA,WAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,QAAA;AAAA,IACA,cAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,uBAAA;AAAA,IACA,iBAAA;AAAA,IACA,YAAA;AAAA,IACA,YAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,GACJ,GAAI,KAAA;AAEJ,EAAA,MAAM,EAAE,KAAA,EAAO,KAAA,EAAO,YAAA,KAAiB,YAAA,CAAgB;AAAA,IACnD,cAAc,KAAA,CAAM,YAAA;AAAA,IACpB;AAAA,GACH,CAAA;AAID,EAAA,MAAM,OAAA,mBACF,GAAA;AAAA,IAACA,cAAA;AAAA,IAAA;AAAA,MACG,KAAA;AAAA,MACA,MAAA,EAAQ,UAAA;AAAA,MACR,QAAA;AAAA,MACA,OAAA,EAAS,KAAA;AAAA,MACT,OAAA,EAAS,aAAa,SAAA,GAAY,OAAA;AAAA,MAClC,QAAA,EAAU,YAAA;AAAA,MACV,aAAA,EAAe,aAAa,UAAA,GAAa,QAAA;AAAA,MACzC,WAAA;AAAA,MACA,QAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA,EAAW,aAAa,CAAC,QAAA;AAAA,MACzB,OAAA,EAAS,KAAA;AAAA,MACT,uBAAA;AAAA,MACA,iBAAA;AAAA,MACA,YAAA;AAAA,MACA,YAAA;AAAA,MACA,KAAA,EAAO,iBAAA,IAAqB,MAAA,CAAO,IAAA,CAAK,iBAAiB,CAAA,CAAE,MAAA,GAAS,iBAAA,GAAqB,MAAA,CAAO,IAAA,CAAK,kBAAkB,CAAA,CAAE,SAAS,kBAAA,GAAqB,MAAA;AAAA,MACtJ,GAAG;AAAA;AAAA,GACR;AAGJ,EAAA,IAAI,QAAA,EAAU;AACV,IAAA,OAAO,OAAA;AAAA,EACX;AAEA,EAAA,uBACI,GAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACG,EAAA;AAAA,MACA,SAAA;AAAA,MACA,cAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,OAAA;AAAA,MACA,KAAA;AAAA,MACA,cAAA;AAAA,MACA,aAAA;AAAA,MAEC,QAAA,EAAA;AAAA;AAAA,GACL;AAER;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../src/form/selects/TreeSelect/index.native.tsx"],"sourcesContent":["import React from \"react\";\nimport KitsContainer from \"../../helpers/FormContainer\";\nimport type { ITreeSelect } from \"@lmb-it/kitsconcerto-types\";\nimport { TreeSelect } from \"@lmb-it/kitsconcertomobile\";\nimport { ClHelper } from \"../../helpers/Functions\";\nimport { useTreeBuild } from \"../hooks/useTreeBuild\";\nimport { useComponentDefaults, useResolvedStyle } from \"@lmb-it/kitsconcerto/hooks\";\n\nconst KitsTreeSelect = <T = any,>({ ref, ...rawProps }: ITreeSelect) => {\n    const { mergedProps: props, themeStyle, elementStyles } = useComponentDefaults('TreeSelect', rawProps, 'Select');\n    const resolvedThemeStyle = useResolvedStyle(themeStyle);\n    const resolvedRootStyle = useResolvedStyle(elementStyles?.root || {});\n    const {\n        rightAddon,\n        leftAddon,\n        errors,\n        invalid,\n        label,\n        id,\n        placeholder,\n        required,\n        disabled,\n        helperText,\n        attached,\n        isFloatedLabel,\n        inputSize,\n        valueMode,\n        isMultiple,\n        localProps,\n        withFilter,\n        filterBy,\n        hideError,\n        onlyParentsWithChildren,\n        resetFilterOnHide,\n        scrollHeight,\n        emptyMessage,\n        showClear,\n        containerStyle,\n    } = props;\n\n    const { nodes, value, handleChange } = useTreeBuild<T>({\n        isStructured: props.isStructured,\n        ref,\n    });\n\n\n\n    const Element = (\n        <TreeSelect\n            value={value}\n            filter={withFilter}\n            filterBy={filterBy}\n            options={nodes}\n            display={isMultiple ? valueMode : \"comma\"}\n            onChange={handleChange}\n            selectionMode={isMultiple ? 'checkbox' : 'single'}\n            placeholder={placeholder}\n            disabled={disabled}\n            invalid={invalid}\n            showClear={showClear ?? !required}\n            isModal={false}\n            onlyParentsWithChildren={onlyParentsWithChildren}\n            resetFilterOnHide={resetFilterOnHide}\n            scrollHeight={scrollHeight}\n            emptyMessage={emptyMessage}\n            style={resolvedRootStyle && Object.keys(resolvedRootStyle).length ? resolvedRootStyle : (Object.keys(resolvedThemeStyle).length ? resolvedThemeStyle : undefined)}\n            {...localProps}\n        />\n    );\n\n    if (attached) {\n        return Element;\n    }\n\n    return (\n        <KitsContainer\n            id={id}\n            inputSize={inputSize}\n            isFloatedLabel={isFloatedLabel}\n            rightAddon={rightAddon}\n            leftAddon={leftAddon}\n            required={required}\n            hideError={hideError}\n            errors={errors}\n            helperText={helperText}\n            invalid={invalid}\n            label={label}\n            containerStyle={containerStyle}\n            elementStyles={elementStyles}\n        >\n            {Element}\n        </KitsContainer>\n    );\n}\nexport default KitsTreeSelect;\n"],"names":["TreeSelect"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,MAAM,iBAAiB,CAAW,EAAE,GAAA,EAAK,GAAG,UAAS,KAAmB;AACpE,EAAA,MAAM,EAAE,aAAa,KAAA,EAAO,UAAA,EAAY,eAAc,GAAI,oBAAA,CAAqB,YAAA,EAAc,QAAA,EAAU,QAAQ,CAAA;AAC/G,EAAA,MAAM,kBAAA,GAAqB,iBAAiB,UAAU,CAAA;AACtD,EAAA,MAAM,iBAAA,GAAoB,gBAAA,CAAiB,aAAA,EAAe,IAAA,IAAQ,EAAE,CAAA;AACpE,EAAA,MAAM;AAAA,IACF,UAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,IACA,KAAA;AAAA,IACA,EAAA;AAAA,IACA,WAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,QAAA;AAAA,IACA,cAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,uBAAA;AAAA,IACA,iBAAA;AAAA,IACA,YAAA;AAAA,IACA,YAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,GACJ,GAAI,KAAA;AAEJ,EAAA,MAAM,EAAE,KAAA,EAAO,KAAA,EAAO,YAAA,KAAiB,YAAA,CAAgB;AAAA,IACnD,cAAc,KAAA,CAAM,YAAA;AAAA,IACpB;AAAA,GACH,CAAA;AAID,EAAA,MAAM,OAAA,mBACF,GAAA;AAAA,IAACA,cAAA;AAAA,IAAA;AAAA,MACG,KAAA;AAAA,MACA,MAAA,EAAQ,UAAA;AAAA,MACR,QAAA;AAAA,MACA,OAAA,EAAS,KAAA;AAAA,MACT,OAAA,EAAS,aAAa,SAAA,GAAY,OAAA;AAAA,MAClC,QAAA,EAAU,YAAA;AAAA,MACV,aAAA,EAAe,aAAa,UAAA,GAAa,QAAA;AAAA,MACzC,WAAA;AAAA,MACA,QAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA,EAAW,aAAa,CAAC,QAAA;AAAA,MACzB,OAAA,EAAS,KAAA;AAAA,MACT,uBAAA;AAAA,MACA,iBAAA;AAAA,MACA,YAAA;AAAA,MACA,YAAA;AAAA,MACA,KAAA,EAAO,iBAAA,IAAqB,MAAA,CAAO,IAAA,CAAK,iBAAiB,CAAA,CAAE,MAAA,GAAS,iBAAA,GAAqB,MAAA,CAAO,IAAA,CAAK,kBAAkB,CAAA,CAAE,SAAS,kBAAA,GAAqB,MAAA;AAAA,MACtJ,GAAG;AAAA;AAAA,GACR;AAGJ,EAAA,IAAI,QAAA,EAAU;AACV,IAAA,OAAO,OAAA;AAAA,EACX;AAEA,EAAA,uBACI,GAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACG,EAAA;AAAA,MACA,SAAA;AAAA,MACA,cAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,OAAA;AAAA,MACA,KAAA;AAAA,MACA,cAAA;AAAA,MACA,aAAA;AAAA,MAEC,QAAA,EAAA;AAAA;AAAA,GACL;AAER;;;;"}

package/form/selects/helpers/SelectPopupOverlay.cjs

@@ -61,6 +61,7 @@ require('yup');
 require('../../../packages/types/src/Css/map/index.cjs');
 require('../../../packages/types/src/Theme/shadows.cjs');
 require('../../../packages/types/src/Theme/defaultTheme.cjs');
+require('../../../packages/types/src/Theme/resolvers.cjs');
 require('../../../packages/types/src/Theme/alphaColors.cjs');
 require('../../../apps/mobile/src/Factory/helpers/cssVarMap.cjs');
 require('../../../apps/mobile/src/Factory/DimensionsContext.cjs');

package/form/selects/helpers/SelectPopupOverlay.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SelectPopupOverlay.cjs","sources":["../../../../../src/form/selects/helpers/SelectPopupOverlay.native.tsx"],"sourcesContent":["import React from 'react';\nimport {Pressable, StyleSheet, Text, View, useWindowDimensions} from 'react-native';\nimport {useSafeAreaInsets} from 'react-native-safe-area-context';\nimport {readerEdge, useKeyboardHeight} from '@lmb-it/kitsconcertomobile';\nimport KitsDialogControlled from '../../../components/overlay/Dialog';\nimport {useKitsTheme} from '../../../contexts/Theme';\nimport {useLanguage} from '../../../hooks';\nimport useThemedFont from '../../../hooks/useThemedFont';\n\n/**\n * The container a select's options live in when `popup` is on.\n *\n * ⛔ THIS IS NOT A SECOND OVERLAY MECHANISM. It is the library's own\n * `KitsDialogControlled` in bottom-sheet position, so the scrim, the slide\n * animation, the safe-area insets, `dismissableMask` and Android's hardware\n * back all come from the one place that already owns them. The only thing\n * this file adds is the header row and the sizing a picker needs.\n *\n * ⛔ IT USES `content` MODE ON PURPOSE. The Dialog's default template puts its\n * children inside a ScrollView with `maxHeight: 400`. A FlatList inside a\n * ScrollView scrolls badly and warns, and a 400pt cap is the very thing the\n * popup exists to escape. `content` replaces the whole header/body/footer\n * template, so the caller's search field can be pinned and its list can own\n * the remaining height.\n *\n * WHY A FIXED FRACTION OF THE SCREEN. The popup's whole purpose is that its\n * height does not depend on where the trigger happens to sit or on whether the\n * keyboard is up. It takes a fixed share of the window, the search field sits\n * at the top of it, and the list takes the rest.\n */\n\nexport interface ISelectPopupOverlayProps {\n    /** Open state. */\n    visible: boolean;\n    /** Called for every dismissal route — the ✕, the scrim, Android back. */\n    onClose: () => void;\n    /** Title shown beside the close control. Falls back to the field's label. */\n    title?: React.ReactNode;\n    /** The search field and the list. */\n    children: React.ReactNode;\n}\n\n/** Share of the window height the sheet occupies when the keyboard is down. */\nconst SHEET_HEIGHT_RATIO = 0.75;\n/** Never shorter than this, even on a small screen with the keyboard up. */\nconst SHEET_MIN_HEIGHT = 240;\n\nconst SelectPopupOverlay = ({visible, onClose, title, children}: ISelectPopupOverlayProps) => {\n    const {resolveToken} = useKitsTheme();\n    const {isRTL} = useLanguage();\n    /* Physical edges to write so the header lands where the reader starts. */\n    const edge = readerEdge(isRTL);\n    const insets = useSafeAreaInsets();\n    const {height: windowHeight} = useWindowDimensions();\n    /* Raw RN <Text> does not inherit `fontFamily` through View parents, so a\n       consumer that swaps the theme font would see it everywhere except here.\n       See useThemedFont's own note. */\n    const headingFont = useThemedFont('heading');\n    const keyboardHeight = useKeyboardHeight();\n\n    /*\n     * ⛔ \"OWNS THE SCREEN\" MEANS ABOVE THE KEYBOARD, NOT BEHIND IT. A sheet\n     * pinned to the bottom at a fixed 75% still has its lower half under the\n     * keyboard the moment the search field takes focus, and the list is back to\n     * competing for the gap — the exact fault the popup exists to escape, one\n     * layer along. The sheet is capped to what is actually visible.\n     *\n     * The keyboard replaces the bottom inset rather than adding to it: it\n     * covers the home indicator.\n     */\n    const visibleHeight = windowHeight - Math.max(insets.bottom, keyboardHeight) - insets.top;\n    const sheetHeight = Math.max(\n        Math.min(SHEET_MIN_HEIGHT, visibleHeight),\n        Math.min(Math.round(windowHeight * SHEET_HEIGHT_RATIO), visibleHeight),\n    );\n\n    const textColor = resolveToken('text');\n    const borderColor = resolveToken('border');\n    const grabberColor = resolveToken('gray.300');\n    const subtextColor = resolveToken('gray.500');\n\n    return (\n        <KitsDialogControlled\n            onHide={onClose}\n            state={{\n                visible,\n                position: 'bottom',\n                // Tap-outside dismiss. `onRequestClose` inside the Dialog gives\n                // Android's back button the same route.\n                dismissableMask: true,\n                onClose,\n                style: {\n                    height: sheetHeight,\n                    // The keyboard already clears the home indicator, so the\n                    // inset is only owed when the keyboard is down.\n                    paddingBottom: keyboardHeight > 0 ? 0 : insets.bottom,\n                    marginBottom: keyboardHeight,\n                },\n                content: ({hide}: {hide: () => void}) => (\n                    <View style={styles.root}>\n                        <View style={[styles.grabber, {backgroundColor: grabberColor}]} />\n                        <View\n                            style={[\n                                styles.header,\n                                {borderBottomColor: borderColor},\n                                /* ⛔ THE PHYSICAL EDGE IS COMPUTED, NEVER NAMED.\n                                   React Native mirrors `flexDirection: 'row'`\n                                   and `textAlign` when the process is RTL — the\n                                   App calls `I18nManager.forceRTL` — so naming\n                                   the RTL edge for an RTL reader asks for it\n                                   twice and lands on the LTR one. That is why\n                                   this header drew its title LEFT and its ✕\n                                   RIGHT in Arabic while the option rows below\n                                   it, which already went through `readerEdge`,\n                                   were correct. See `readerEdge`. */\n                                {flexDirection: edge.flexDirection},\n                            ]}>\n                            <Text\n                                numberOfLines={1}\n                                style={[\n                                    styles.title,\n                                    {color: textColor, fontFamily: headingFont},\n                                    {\n                                        textAlign: edge.textAlign,\n                                        /* `writingDirection` is NOT mirrored — it\n                                           orders glyphs inside the line, so it\n                                           takes the reader's own direction. */\n                                        writingDirection: isRTL ? ('rtl' as const) : ('ltr' as const),\n                                    },\n                                ]}>\n                                {title}\n                            </Text>\n                            <Pressable onPress={hide} hitSlop={12} accessibilityRole=\"button\">\n                                <Text style={[styles.close, {color: subtextColor}]}>✕</Text>\n                            </Pressable>\n                        </View>\n                        {children}\n                    </View>\n                ),\n            }}\n        />\n    );\n};\n\nconst styles = StyleSheet.create({\n    root: {\n        flex: 1,\n        minHeight: 0,\n    },\n    grabber: {\n        width: 40,\n        height: 4,\n        borderRadius: 2,\n        alignSelf: 'center',\n        marginTop: 8,\n        marginBottom: 4,\n    },\n    header: {\n        alignItems: 'center',\n        paddingHorizontal: 16,\n        paddingVertical: 12,\n        borderBottomWidth: 1,\n        gap: 12,\n    },\n    title: {\n        flex: 1,\n        fontSize: 17,\n        fontWeight: '700',\n    },\n    close: {\n        fontSize: 18,\n    },\n});\n\nexport default SelectPopupOverlay;\n"],"names":["useKitsTheme","useLanguage","readerEdge","useSafeAreaInsets","useWindowDimensions","useThemedFont","useKeyboardHeight","jsx","KitsDialogControlled","jsxs","View","Text","Pressable","StyleSheet"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAM,kBAAA,GAAqB,IAAA;AAE3B,MAAM,gBAAA,GAAmB,GAAA;AAEzB,MAAM,qBAAqB,CAAC,EAAC,SAAS,OAAA,EAAS,KAAA,EAAO,UAAQ,KAAgC;AAC1F,EAAA,MAAM,EAAC,YAAA,EAAY,GAAIA,qCAAA,EAAa;AACpC,EAAA,MAAM,EAAC,KAAA,EAAK,GAAIC,kBAAA,EAAY;AAE5B,EAAA,MAAM,IAAA,GAAOC,sBAAW,KAAK,CAAA;AAC7B,EAAA,MAAM,SAASC,4CAAA,EAAkB;AACjC,EAAA,MAAM,EAAC,MAAA,EAAQ,YAAA,EAAY,GAAIC,+BAAA,EAAoB;AAInD,EAAA,MAAM,WAAA,GAAcC,sBAAc,SAAS,CAAA;AAC3C,EAAA,MAAM,iBAAiBC,mCAAA,EAAkB;AAYzC,EAAA,MAAM,aAAA,GAAgB,eAAe,IAAA,CAAK,GAAA,CAAI,OAAO,MAAA,EAAQ,cAAc,IAAI,MAAA,CAAO,GAAA;AACtF,EAAA,MAAM,cAAc,IAAA,CAAK,GAAA;AAAA,IACrB,IAAA,CAAK,GAAA,CAAI,gBAAA,EAAkB,aAAa,CAAA;AAAA,IACxC,KAAK,GAAA,CAAI,IAAA,CAAK,MAAM,YAAA,GAAe,kBAAkB,GAAG,aAAa;AAAA,GACzE;AAEA,EAAA,MAAM,SAAA,GAAY,aAAa,MAAM,CAAA;AACrC,EAAA,MAAM,WAAA,GAAc,aAAa,QAAQ,CAAA;AACzC,EAAA,MAAM,YAAA,GAAe,aAAa,UAAU,CAAA;AAC5C,EAAA,MAAM,YAAA,GAAe,aAAa,UAAU,CAAA;AAE5C,EAAA,uBACIC,cAAA;AAAA,IAACC,oBAAA;AAAA,IAAA;AAAA,MACG,MAAA,EAAQ,OAAA;AAAA,MACR,KAAA,EAAO;AAAA,QACH,OAAA;AAAA,QACA,QAAA,EAAU,QAAA;AAAA;AAAA;AAAA,QAGV,eAAA,EAAiB,IAAA;AAAA,QACjB,OAAA;AAAA,QACA,KAAA,EAAO;AAAA,UACH,MAAA,EAAQ,WAAA;AAAA;AAAA;AAAA,UAGR,aAAA,EAAe,cAAA,GAAiB,CAAA,GAAI,CAAA,GAAI,MAAA,CAAO,MAAA;AAAA,UAC/C,YAAA,EAAc;AAAA,SAClB;AAAA,QACA,OAAA,EAAS,CAAC,EAAC,IAAA,uBACPC,eAAA,CAACC,gBAAA,EAAA,EAAK,KAAA,EAAO,MAAA,CAAO,IAAA,EAChB,QAAA,EAAA;AAAA,0BAAAH,cAAA,CAACG,gBAAA,EAAA,EAAK,OAAO,CAAC,MAAA,CAAO,SAAS,EAAC,eAAA,EAAiB,YAAA,EAAa,CAAA,EAAG,CAAA;AAAA,0BAChED,eAAA;AAAA,YAACC,gBAAA;AAAA,YAAA;AAAA,cACG,KAAA,EAAO;AAAA,gBACH,MAAA,CAAO,MAAA;AAAA,gBACP,EAAC,mBAAmB,WAAA,EAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAW/B,EAAC,aAAA,EAAe,IAAA,CAAK,aAAA;AAAa,eACtC;AAAA,cACA,QAAA,EAAA;AAAA,gCAAAH,cAAA;AAAA,kBAACI,gBAAA;AAAA,kBAAA;AAAA,oBACG,aAAA,EAAe,CAAA;AAAA,oBACf,KAAA,EAAO;AAAA,sBACH,MAAA,CAAO,KAAA;AAAA,sBACP,EAAC,KAAA,EAAO,SAAA,EAAW,UAAA,EAAY,WAAA,EAAW;AAAA,sBAC1C;AAAA,wBACI,WAAW,IAAA,CAAK,SAAA;AAAA;AAAA;AAAA;AAAA,wBAIhB,gBAAA,EAAkB,QAAS,KAAA,GAAmB;AAAA;AAClD,qBACJ;AAAA,oBACC,QAAA,EAAA;AAAA;AAAA,iBACL;AAAA,gCACAJ,cAAA,CAACK,yBAAU,OAAA,EAAS,IAAA,EAAM,SAAS,EAAA,EAAI,iBAAA,EAAkB,UACrD,QAAA,kBAAAL,cAAA,CAACI,gBAAA,EAAA,EAAK,OAAO,CAAC,MAAA,CAAO,OAAO,EAAC,KAAA,EAAO,cAAa,CAAA,EAAG,oBAAC,CAAA,EACzD;AAAA;AAAA;AAAA,WACJ;AAAA,UACC;AAAA,SAAA,EACL;AAAA;AAER;AAAA,GACJ;AAER;AAEA,MAAM,MAAA,GAASE,uBAAW,MAAA,CAAO;AAAA,EAC7B,IAAA,EAAM;AAAA,IACF,IAAA,EAAM,CAAA;AAAA,IACN,SAAA,EAAW;AAAA,GACf;AAAA,EACA,OAAA,EAAS;AAAA,IACL,KAAA,EAAO,EAAA;AAAA,IACP,MAAA,EAAQ,CAAA;AAAA,IACR,YAAA,EAAc,CAAA;AAAA,IACd,SAAA,EAAW,QAAA;AAAA,IACX,SAAA,EAAW,CAAA;AAAA,IACX,YAAA,EAAc;AAAA,GAClB;AAAA,EACA,MAAA,EAAQ;AAAA,IACJ,UAAA,EAAY,QAAA;AAAA,IACZ,iBAAA,EAAmB,EAAA;AAAA,IACnB,eAAA,EAAiB,EAAA;AAAA,IACjB,iBAAA,EAAmB,CAAA;AAAA,IACnB,GAAA,EAAK;AAAA,GACT;AAAA,EACA,KAAA,EAAO;AAAA,IACH,IAAA,EAAM,CAAA;AAAA,IACN,QAAA,EAAU,EAAA;AAAA,IACV,UAAA,EAAY;AAAA,GAChB;AAAA,EACA,KAAA,EAAO;AAAA,IACH,QAAA,EAAU;AAAA;AAElB,CAAC,CAAA;;;;"}
+{"version":3,"file":"SelectPopupOverlay.cjs","sources":["../../../../../src/form/selects/helpers/SelectPopupOverlay.native.tsx"],"sourcesContent":["import React from 'react';\nimport {Pressable, StyleSheet, Text, View, useWindowDimensions} from 'react-native';\nimport {useSafeAreaInsets} from 'react-native-safe-area-context';\nimport {readerEdge, useKeyboardHeight} from '@lmb-it/kitsconcertomobile';\nimport KitsDialogControlled from '../../../components/overlay/Dialog';\nimport {useKitsTheme} from '../../../contexts/Theme';\nimport {useLanguage} from '../../../hooks';\nimport useThemedFont from '../../../hooks/useThemedFont';\n\n/**\n * The container a select's options live in when `popup` is on.\n *\n * ⛔ THIS IS NOT A SECOND OVERLAY MECHANISM. It is the library's own\n * `KitsDialogControlled` in bottom-sheet position, so the scrim, the slide\n * animation, the safe-area insets, `dismissableMask` and Android's hardware\n * back all come from the one place that already owns them. The only thing\n * this file adds is the header row and the sizing a picker needs.\n *\n * ⛔ IT USES `content` MODE ON PURPOSE. The Dialog's default template puts its\n * children inside a ScrollView with `maxHeight: 400`. A FlatList inside a\n * ScrollView scrolls badly and warns, and a 400pt cap is the very thing the\n * popup exists to escape. `content` replaces the whole header/body/footer\n * template, so the caller's search field can be pinned and its list can own\n * the remaining height.\n *\n * WHY A FIXED FRACTION OF THE SCREEN. The popup's whole purpose is that its\n * height does not depend on where the trigger happens to sit or on whether the\n * keyboard is up. It takes a fixed share of the window, the search field sits\n * at the top of it, and the list takes the rest.\n */\n\nexport interface ISelectPopupOverlayProps {\n    /** Open state. */\n    visible: boolean;\n    /** Called for every dismissal route — the ✕, the scrim, Android back. */\n    onClose: () => void;\n    /** Title shown beside the close control. Falls back to the field's label. */\n    title?: React.ReactNode;\n    /** The search field and the list. */\n    children: React.ReactNode;\n}\n\n/** Share of the window height the sheet occupies when the keyboard is down. */\nconst SHEET_HEIGHT_RATIO = 0.75;\n/** Never shorter than this, even on a small screen with the keyboard up. */\nconst SHEET_MIN_HEIGHT = 240;\n\nconst SelectPopupOverlay = ({visible, onClose, title, children}: ISelectPopupOverlayProps) => {\n    const {resolveToken} = useKitsTheme();\n    const {isRTL} = useLanguage();\n    /* Physical edges to write so the header lands where the reader starts. */\n    const edge = readerEdge(isRTL);\n    const insets = useSafeAreaInsets();\n    const {height: windowHeight} = useWindowDimensions();\n    /* Raw RN <Text> does not inherit `fontFamily` through View parents, so a\n       consumer that swaps the theme font would see it everywhere except here.\n       See useThemedFont's own note. */\n    const headingFont = useThemedFont('heading');\n    const keyboardHeight = useKeyboardHeight();\n\n    /*\n     * ⛔ \"OWNS THE SCREEN\" MEANS ABOVE THE KEYBOARD, NOT BEHIND IT. A sheet\n     * pinned to the bottom at a fixed 75% still has its lower half under the\n     * keyboard the moment the search field takes focus, and the list is back to\n     * competing for the gap — the exact fault the popup exists to escape, one\n     * layer along. The sheet is capped to what is actually visible.\n     *\n     * The keyboard replaces the bottom inset rather than adding to it: it\n     * covers the home indicator.\n     */\n    const visibleHeight = windowHeight - Math.max(insets.bottom, keyboardHeight) - insets.top;\n    const sheetHeight = Math.max(\n        Math.min(SHEET_MIN_HEIGHT, visibleHeight),\n        Math.min(Math.round(windowHeight * SHEET_HEIGHT_RATIO), visibleHeight),\n    );\n\n    const textColor = resolveToken('text');\n    const borderColor = resolveToken('border');\n    const grabberColor = resolveToken('gray.300');\n    const subtextColor = resolveToken('gray.500');\n\n    return (\n        <KitsDialogControlled\n            onHide={onClose}\n            state={{\n                visible,\n                position: 'bottom',\n                // Tap-outside dismiss. `onRequestClose` inside the Dialog gives\n                // Android's back button the same route.\n                dismissableMask: true,\n                onClose,\n                style: {\n                    height: sheetHeight,\n                    // The keyboard already clears the home indicator, so the\n                    // inset is only owed when the keyboard is down.\n                    paddingBottom: keyboardHeight > 0 ? 0 : insets.bottom,\n                    marginBottom: keyboardHeight,\n                },\n                content: ({hide}: {hide: () => void}) => (\n                    <View style={styles.root}>\n                        <View style={[styles.grabber, {backgroundColor: grabberColor}]} />\n                        <View\n                            style={[\n                                styles.header,\n                                {borderBottomColor: borderColor},\n                                /* ⛔ THE PHYSICAL EDGE IS COMPUTED, NEVER NAMED.\n                                   React Native mirrors `flexDirection: 'row'`\n                                   and `textAlign` when the process is RTL — the\n                                   App calls `I18nManager.forceRTL` — so naming\n                                   the RTL edge for an RTL reader asks for it\n                                   twice and lands on the LTR one. That is why\n                                   this header drew its title LEFT and its ✕\n                                   RIGHT in Arabic while the option rows below\n                                   it, which already went through `readerEdge`,\n                                   were correct. See `readerEdge`. */\n                                {flexDirection: edge.flexDirection},\n                            ]}>\n                            <Text\n                                numberOfLines={1}\n                                style={[\n                                    styles.title,\n                                    {color: textColor, fontFamily: headingFont},\n                                    {\n                                        textAlign: edge.textAlign,\n                                        /* `writingDirection` is NOT mirrored — it\n                                           orders glyphs inside the line, so it\n                                           takes the reader's own direction. */\n                                        writingDirection: isRTL ? ('rtl' as const) : ('ltr' as const),\n                                    },\n                                ]}>\n                                {title}\n                            </Text>\n                            <Pressable onPress={hide} hitSlop={12} accessibilityRole=\"button\">\n                                <Text style={[styles.close, {color: subtextColor}]}>✕</Text>\n                            </Pressable>\n                        </View>\n                        {children}\n                    </View>\n                ),\n            }}\n        />\n    );\n};\n\nconst styles = StyleSheet.create({\n    root: {\n        flex: 1,\n        minHeight: 0,\n    },\n    grabber: {\n        width: 40,\n        height: 4,\n        borderRadius: 2,\n        alignSelf: 'center',\n        marginTop: 8,\n        marginBottom: 4,\n    },\n    header: {\n        alignItems: 'center',\n        paddingHorizontal: 16,\n        paddingVertical: 12,\n        borderBottomWidth: 1,\n        gap: 12,\n    },\n    title: {\n        flex: 1,\n        fontSize: 17,\n        fontWeight: '700',\n    },\n    close: {\n        fontSize: 18,\n    },\n});\n\nexport default SelectPopupOverlay;\n"],"names":["useKitsTheme","useLanguage","readerEdge","useSafeAreaInsets","useWindowDimensions","useThemedFont","useKeyboardHeight","jsx","KitsDialogControlled","jsxs","View","Text","Pressable","StyleSheet"],"mappings":"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"}

package/form/selects/helpers/SelectPopupOverlay.js

@@ -57,6 +57,7 @@ import 'yup';
 import '../../../packages/types/src/Css/map/index.js';
 import '../../../packages/types/src/Theme/shadows.js';
 import '../../../packages/types/src/Theme/defaultTheme.js';
+import '../../../packages/types/src/Theme/resolvers.js';
 import '../../../packages/types/src/Theme/alphaColors.js';
 import '../../../apps/mobile/src/Factory/helpers/cssVarMap.js';
 import '../../../apps/mobile/src/Factory/DimensionsContext.js';

package/form/selects/helpers/SelectPopupOverlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectPopupOverlay.js","sources":["../../../../../src/form/selects/helpers/SelectPopupOverlay.native.tsx"],"sourcesContent":["import React from 'react';\nimport {Pressable, StyleSheet, Text, View, useWindowDimensions} from 'react-native';\nimport {useSafeAreaInsets} from 'react-native-safe-area-context';\nimport {readerEdge, useKeyboardHeight} from '@lmb-it/kitsconcertomobile';\nimport KitsDialogControlled from '../../../components/overlay/Dialog';\nimport {useKitsTheme} from '../../../contexts/Theme';\nimport {useLanguage} from '../../../hooks';\nimport useThemedFont from '../../../hooks/useThemedFont';\n\n/**\n * The container a select's options live in when `popup` is on.\n *\n * ⛔ THIS IS NOT A SECOND OVERLAY MECHANISM. It is the library's own\n * `KitsDialogControlled` in bottom-sheet position, so the scrim, the slide\n * animation, the safe-area insets, `dismissableMask` and Android's hardware\n * back all come from the one place that already owns them. The only thing\n * this file adds is the header row and the sizing a picker needs.\n *\n * ⛔ IT USES `content` MODE ON PURPOSE. The Dialog's default template puts its\n * children inside a ScrollView with `maxHeight: 400`. A FlatList inside a\n * ScrollView scrolls badly and warns, and a 400pt cap is the very thing the\n * popup exists to escape. `content` replaces the whole header/body/footer\n * template, so the caller's search field can be pinned and its list can own\n * the remaining height.\n *\n * WHY A FIXED FRACTION OF THE SCREEN. The popup's whole purpose is that its\n * height does not depend on where the trigger happens to sit or on whether the\n * keyboard is up. It takes a fixed share of the window, the search field sits\n * at the top of it, and the list takes the rest.\n */\n\nexport interface ISelectPopupOverlayProps {\n    /** Open state. */\n    visible: boolean;\n    /** Called for every dismissal route — the ✕, the scrim, Android back. */\n    onClose: () => void;\n    /** Title shown beside the close control. Falls back to the field's label. */\n    title?: React.ReactNode;\n    /** The search field and the list. */\n    children: React.ReactNode;\n}\n\n/** Share of the window height the sheet occupies when the keyboard is down. */\nconst SHEET_HEIGHT_RATIO = 0.75;\n/** Never shorter than this, even on a small screen with the keyboard up. */\nconst SHEET_MIN_HEIGHT = 240;\n\nconst SelectPopupOverlay = ({visible, onClose, title, children}: ISelectPopupOverlayProps) => {\n    const {resolveToken} = useKitsTheme();\n    const {isRTL} = useLanguage();\n    /* Physical edges to write so the header lands where the reader starts. */\n    const edge = readerEdge(isRTL);\n    const insets = useSafeAreaInsets();\n    const {height: windowHeight} = useWindowDimensions();\n    /* Raw RN <Text> does not inherit `fontFamily` through View parents, so a\n       consumer that swaps the theme font would see it everywhere except here.\n       See useThemedFont's own note. */\n    const headingFont = useThemedFont('heading');\n    const keyboardHeight = useKeyboardHeight();\n\n    /*\n     * ⛔ \"OWNS THE SCREEN\" MEANS ABOVE THE KEYBOARD, NOT BEHIND IT. A sheet\n     * pinned to the bottom at a fixed 75% still has its lower half under the\n     * keyboard the moment the search field takes focus, and the list is back to\n     * competing for the gap — the exact fault the popup exists to escape, one\n     * layer along. The sheet is capped to what is actually visible.\n     *\n     * The keyboard replaces the bottom inset rather than adding to it: it\n     * covers the home indicator.\n     */\n    const visibleHeight = windowHeight - Math.max(insets.bottom, keyboardHeight) - insets.top;\n    const sheetHeight = Math.max(\n        Math.min(SHEET_MIN_HEIGHT, visibleHeight),\n        Math.min(Math.round(windowHeight * SHEET_HEIGHT_RATIO), visibleHeight),\n    );\n\n    const textColor = resolveToken('text');\n    const borderColor = resolveToken('border');\n    const grabberColor = resolveToken('gray.300');\n    const subtextColor = resolveToken('gray.500');\n\n    return (\n        <KitsDialogControlled\n            onHide={onClose}\n            state={{\n                visible,\n                position: 'bottom',\n                // Tap-outside dismiss. `onRequestClose` inside the Dialog gives\n                // Android's back button the same route.\n                dismissableMask: true,\n                onClose,\n                style: {\n                    height: sheetHeight,\n                    // The keyboard already clears the home indicator, so the\n                    // inset is only owed when the keyboard is down.\n                    paddingBottom: keyboardHeight > 0 ? 0 : insets.bottom,\n                    marginBottom: keyboardHeight,\n                },\n                content: ({hide}: {hide: () => void}) => (\n                    <View style={styles.root}>\n                        <View style={[styles.grabber, {backgroundColor: grabberColor}]} />\n                        <View\n                            style={[\n                                styles.header,\n                                {borderBottomColor: borderColor},\n                                /* ⛔ THE PHYSICAL EDGE IS COMPUTED, NEVER NAMED.\n                                   React Native mirrors `flexDirection: 'row'`\n                                   and `textAlign` when the process is RTL — the\n                                   App calls `I18nManager.forceRTL` — so naming\n                                   the RTL edge for an RTL reader asks for it\n                                   twice and lands on the LTR one. That is why\n                                   this header drew its title LEFT and its ✕\n                                   RIGHT in Arabic while the option rows below\n                                   it, which already went through `readerEdge`,\n                                   were correct. See `readerEdge`. */\n                                {flexDirection: edge.flexDirection},\n                            ]}>\n                            <Text\n                                numberOfLines={1}\n                                style={[\n                                    styles.title,\n                                    {color: textColor, fontFamily: headingFont},\n                                    {\n                                        textAlign: edge.textAlign,\n                                        /* `writingDirection` is NOT mirrored — it\n                                           orders glyphs inside the line, so it\n                                           takes the reader's own direction. */\n                                        writingDirection: isRTL ? ('rtl' as const) : ('ltr' as const),\n                                    },\n                                ]}>\n                                {title}\n                            </Text>\n                            <Pressable onPress={hide} hitSlop={12} accessibilityRole=\"button\">\n                                <Text style={[styles.close, {color: subtextColor}]}>✕</Text>\n                            </Pressable>\n                        </View>\n                        {children}\n                    </View>\n                ),\n            }}\n        />\n    );\n};\n\nconst styles = StyleSheet.create({\n    root: {\n        flex: 1,\n        minHeight: 0,\n    },\n    grabber: {\n        width: 40,\n        height: 4,\n        borderRadius: 2,\n        alignSelf: 'center',\n        marginTop: 8,\n        marginBottom: 4,\n    },\n    header: {\n        alignItems: 'center',\n        paddingHorizontal: 16,\n        paddingVertical: 12,\n        borderBottomWidth: 1,\n        gap: 12,\n    },\n    title: {\n        flex: 1,\n        fontSize: 17,\n        fontWeight: '700',\n    },\n    close: {\n        fontSize: 18,\n    },\n});\n\nexport default SelectPopupOverlay;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"SelectPopupOverlay.js","sources":["../../../../../src/form/selects/helpers/SelectPopupOverlay.native.tsx"],"sourcesContent":["import React from 'react';\nimport {Pressable, StyleSheet, Text, View, useWindowDimensions} from 'react-native';\nimport {useSafeAreaInsets} from 'react-native-safe-area-context';\nimport {readerEdge, useKeyboardHeight} from '@lmb-it/kitsconcertomobile';\nimport KitsDialogControlled from '../../../components/overlay/Dialog';\nimport {useKitsTheme} from '../../../contexts/Theme';\nimport {useLanguage} from '../../../hooks';\nimport useThemedFont from '../../../hooks/useThemedFont';\n\n/**\n * The container a select's options live in when `popup` is on.\n *\n * ⛔ THIS IS NOT A SECOND OVERLAY MECHANISM. It is the library's own\n * `KitsDialogControlled` in bottom-sheet position, so the scrim, the slide\n * animation, the safe-area insets, `dismissableMask` and Android's hardware\n * back all come from the one place that already owns them. The only thing\n * this file adds is the header row and the sizing a picker needs.\n *\n * ⛔ IT USES `content` MODE ON PURPOSE. The Dialog's default template puts its\n * children inside a ScrollView with `maxHeight: 400`. A FlatList inside a\n * ScrollView scrolls badly and warns, and a 400pt cap is the very thing the\n * popup exists to escape. `content` replaces the whole header/body/footer\n * template, so the caller's search field can be pinned and its list can own\n * the remaining height.\n *\n * WHY A FIXED FRACTION OF THE SCREEN. The popup's whole purpose is that its\n * height does not depend on where the trigger happens to sit or on whether the\n * keyboard is up. It takes a fixed share of the window, the search field sits\n * at the top of it, and the list takes the rest.\n */\n\nexport interface ISelectPopupOverlayProps {\n    /** Open state. */\n    visible: boolean;\n    /** Called for every dismissal route — the ✕, the scrim, Android back. */\n    onClose: () => void;\n    /** Title shown beside the close control. Falls back to the field's label. */\n    title?: React.ReactNode;\n    /** The search field and the list. */\n    children: React.ReactNode;\n}\n\n/** Share of the window height the sheet occupies when the keyboard is down. */\nconst SHEET_HEIGHT_RATIO = 0.75;\n/** Never shorter than this, even on a small screen with the keyboard up. */\nconst SHEET_MIN_HEIGHT = 240;\n\nconst SelectPopupOverlay = ({visible, onClose, title, children}: ISelectPopupOverlayProps) => {\n    const {resolveToken} = useKitsTheme();\n    const {isRTL} = useLanguage();\n    /* Physical edges to write so the header lands where the reader starts. */\n    const edge = readerEdge(isRTL);\n    const insets = useSafeAreaInsets();\n    const {height: windowHeight} = useWindowDimensions();\n    /* Raw RN <Text> does not inherit `fontFamily` through View parents, so a\n       consumer that swaps the theme font would see it everywhere except here.\n       See useThemedFont's own note. */\n    const headingFont = useThemedFont('heading');\n    const keyboardHeight = useKeyboardHeight();\n\n    /*\n     * ⛔ \"OWNS THE SCREEN\" MEANS ABOVE THE KEYBOARD, NOT BEHIND IT. A sheet\n     * pinned to the bottom at a fixed 75% still has its lower half under the\n     * keyboard the moment the search field takes focus, and the list is back to\n     * competing for the gap — the exact fault the popup exists to escape, one\n     * layer along. The sheet is capped to what is actually visible.\n     *\n     * The keyboard replaces the bottom inset rather than adding to it: it\n     * covers the home indicator.\n     */\n    const visibleHeight = windowHeight - Math.max(insets.bottom, keyboardHeight) - insets.top;\n    const sheetHeight = Math.max(\n        Math.min(SHEET_MIN_HEIGHT, visibleHeight),\n        Math.min(Math.round(windowHeight * SHEET_HEIGHT_RATIO), visibleHeight),\n    );\n\n    const textColor = resolveToken('text');\n    const borderColor = resolveToken('border');\n    const grabberColor = resolveToken('gray.300');\n    const subtextColor = resolveToken('gray.500');\n\n    return (\n        <KitsDialogControlled\n            onHide={onClose}\n            state={{\n                visible,\n                position: 'bottom',\n                // Tap-outside dismiss. `onRequestClose` inside the Dialog gives\n                // Android's back button the same route.\n                dismissableMask: true,\n                onClose,\n                style: {\n                    height: sheetHeight,\n                    // The keyboard already clears the home indicator, so the\n                    // inset is only owed when the keyboard is down.\n                    paddingBottom: keyboardHeight > 0 ? 0 : insets.bottom,\n                    marginBottom: keyboardHeight,\n                },\n                content: ({hide}: {hide: () => void}) => (\n                    <View style={styles.root}>\n                        <View style={[styles.grabber, {backgroundColor: grabberColor}]} />\n                        <View\n                            style={[\n                                styles.header,\n                                {borderBottomColor: borderColor},\n                                /* ⛔ THE PHYSICAL EDGE IS COMPUTED, NEVER NAMED.\n                                   React Native mirrors `flexDirection: 'row'`\n                                   and `textAlign` when the process is RTL — the\n                                   App calls `I18nManager.forceRTL` — so naming\n                                   the RTL edge for an RTL reader asks for it\n                                   twice and lands on the LTR one. That is why\n                                   this header drew its title LEFT and its ✕\n                                   RIGHT in Arabic while the option rows below\n                                   it, which already went through `readerEdge`,\n                                   were correct. See `readerEdge`. */\n                                {flexDirection: edge.flexDirection},\n                            ]}>\n                            <Text\n                                numberOfLines={1}\n                                style={[\n                                    styles.title,\n                                    {color: textColor, fontFamily: headingFont},\n                                    {\n                                        textAlign: edge.textAlign,\n                                        /* `writingDirection` is NOT mirrored — it\n                                           orders glyphs inside the line, so it\n                                           takes the reader's own direction. */\n                                        writingDirection: isRTL ? ('rtl' as const) : ('ltr' as const),\n                                    },\n                                ]}>\n                                {title}\n                            </Text>\n                            <Pressable onPress={hide} hitSlop={12} accessibilityRole=\"button\">\n                                <Text style={[styles.close, {color: subtextColor}]}>✕</Text>\n                            </Pressable>\n                        </View>\n                        {children}\n                    </View>\n                ),\n            }}\n        />\n    );\n};\n\nconst styles = StyleSheet.create({\n    root: {\n        flex: 1,\n        minHeight: 0,\n    },\n    grabber: {\n        width: 40,\n        height: 4,\n        borderRadius: 2,\n        alignSelf: 'center',\n        marginTop: 8,\n        marginBottom: 4,\n    },\n    header: {\n        alignItems: 'center',\n        paddingHorizontal: 16,\n        paddingVertical: 12,\n        borderBottomWidth: 1,\n        gap: 12,\n    },\n    title: {\n        flex: 1,\n        fontSize: 17,\n        fontWeight: '700',\n    },\n    close: {\n        fontSize: 18,\n    },\n});\n\nexport default SelectPopupOverlay;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAM,kBAAA,GAAqB,IAAA;AAE3B,MAAM,gBAAA,GAAmB,GAAA;AAEzB,MAAM,qBAAqB,CAAC,EAAC,SAAS,OAAA,EAAS,KAAA,EAAO,UAAQ,KAAgC;AAC1F,EAAA,MAAM,EAAC,YAAA,EAAY,GAAI,YAAA,EAAa;AACpC,EAAA,MAAM,EAAC,KAAA,EAAK,GAAI,WAAA,EAAY;AAE5B,EAAA,MAAM,IAAA,GAAO,WAAW,KAAK,CAAA;AAC7B,EAAA,MAAM,SAAS,iBAAA,EAAkB;AACjC,EAAA,MAAM,EAAC,MAAA,EAAQ,YAAA,EAAY,GAAI,mBAAA,EAAoB;AAInD,EAAA,MAAM,WAAA,GAAc,cAAc,SAAS,CAAA;AAC3C,EAAA,MAAM,iBAAiB,iBAAA,EAAkB;AAYzC,EAAA,MAAM,aAAA,GAAgB,eAAe,IAAA,CAAK,GAAA,CAAI,OAAO,MAAA,EAAQ,cAAc,IAAI,MAAA,CAAO,GAAA;AACtF,EAAA,MAAM,cAAc,IAAA,CAAK,GAAA;AAAA,IACrB,IAAA,CAAK,GAAA,CAAI,gBAAA,EAAkB,aAAa,CAAA;AAAA,IACxC,KAAK,GAAA,CAAI,IAAA,CAAK,MAAM,YAAA,GAAe,kBAAkB,GAAG,aAAa;AAAA,GACzE;AAEA,EAAA,MAAM,SAAA,GAAY,aAAa,MAAM,CAAA;AACrC,EAAA,MAAM,WAAA,GAAc,aAAa,QAAQ,CAAA;AACzC,EAAA,MAAM,YAAA,GAAe,aAAa,UAAU,CAAA;AAC5C,EAAA,MAAM,YAAA,GAAe,aAAa,UAAU,CAAA;AAE5C,EAAA,uBACI,GAAA;AAAA,IAAC,oBAAA;AAAA,IAAA;AAAA,MACG,MAAA,EAAQ,OAAA;AAAA,MACR,KAAA,EAAO;AAAA,QACH,OAAA;AAAA,QACA,QAAA,EAAU,QAAA;AAAA;AAAA;AAAA,QAGV,eAAA,EAAiB,IAAA;AAAA,QACjB,OAAA;AAAA,QACA,KAAA,EAAO;AAAA,UACH,MAAA,EAAQ,WAAA;AAAA;AAAA;AAAA,UAGR,aAAA,EAAe,cAAA,GAAiB,CAAA,GAAI,CAAA,GAAI,MAAA,CAAO,MAAA;AAAA,UAC/C,YAAA,EAAc;AAAA,SAClB;AAAA,QACA,OAAA,EAAS,CAAC,EAAC,IAAA,uBACP,IAAA,CAAC,IAAA,EAAA,EAAK,KAAA,EAAO,MAAA,CAAO,IAAA,EAChB,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,IAAA,EAAA,EAAK,OAAO,CAAC,MAAA,CAAO,SAAS,EAAC,eAAA,EAAiB,YAAA,EAAa,CAAA,EAAG,CAAA;AAAA,0BAChE,IAAA;AAAA,YAAC,IAAA;AAAA,YAAA;AAAA,cACG,KAAA,EAAO;AAAA,gBACH,MAAA,CAAO,MAAA;AAAA,gBACP,EAAC,mBAAmB,WAAA,EAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAW/B,EAAC,aAAA,EAAe,IAAA,CAAK,aAAA;AAAa,eACtC;AAAA,cACA,QAAA,EAAA;AAAA,gCAAA,GAAA;AAAA,kBAAC,IAAA;AAAA,kBAAA;AAAA,oBACG,aAAA,EAAe,CAAA;AAAA,oBACf,KAAA,EAAO;AAAA,sBACH,MAAA,CAAO,KAAA;AAAA,sBACP,EAAC,KAAA,EAAO,SAAA,EAAW,UAAA,EAAY,WAAA,EAAW;AAAA,sBAC1C;AAAA,wBACI,WAAW,IAAA,CAAK,SAAA;AAAA;AAAA;AAAA;AAAA,wBAIhB,gBAAA,EAAkB,QAAS,KAAA,GAAmB;AAAA;AAClD,qBACJ;AAAA,oBACC,QAAA,EAAA;AAAA;AAAA,iBACL;AAAA,gCACA,GAAA,CAAC,aAAU,OAAA,EAAS,IAAA,EAAM,SAAS,EAAA,EAAI,iBAAA,EAAkB,UACrD,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,OAAO,CAAC,MAAA,CAAO,OAAO,EAAC,KAAA,EAAO,cAAa,CAAA,EAAG,oBAAC,CAAA,EACzD;AAAA;AAAA;AAAA,WACJ;AAAA,UACC;AAAA,SAAA,EACL;AAAA;AAER;AAAA,GACJ;AAER;AAEA,MAAM,MAAA,GAAS,WAAW,MAAA,CAAO;AAAA,EAC7B,IAAA,EAAM;AAAA,IACF,IAAA,EAAM,CAAA;AAAA,IACN,SAAA,EAAW;AAAA,GACf;AAAA,EACA,OAAA,EAAS;AAAA,IACL,KAAA,EAAO,EAAA;AAAA,IACP,MAAA,EAAQ,CAAA;AAAA,IACR,YAAA,EAAc,CAAA;AAAA,IACd,SAAA,EAAW,QAAA;AAAA,IACX,SAAA,EAAW,CAAA;AAAA,IACX,YAAA,EAAc;AAAA,GAClB;AAAA,EACA,MAAA,EAAQ;AAAA,IACJ,UAAA,EAAY,QAAA;AAAA,IACZ,iBAAA,EAAmB,EAAA;AAAA,IACnB,eAAA,EAAiB,EAAA;AAAA,IACjB,iBAAA,EAAmB,CAAA;AAAA,IACnB,GAAA,EAAK;AAAA,GACT;AAAA,EACA,KAAA,EAAO;AAAA,IACH,IAAA,EAAM,CAAA;AAAA,IACN,QAAA,EAAU,EAAA;AAAA,IACV,UAAA,EAAY;AAAA,GAChB;AAAA,EACA,KAAA,EAAO;AAAA,IACH,QAAA,EAAU;AAAA;AAElB,CAAC,CAAA;;;;"}

package/form-renderer/components/layout/FieldWrapper.cjs

@@ -64,6 +64,7 @@ require('../../../packages/types/src/Components/Molecules/Form/FilePicker/types/
 require('../../../packages/types/src/Css/map/index.cjs');
 require('../../../packages/types/src/Theme/shadows.cjs');
 require('../../../packages/types/src/Theme/defaultTheme.cjs');
+require('../../../packages/types/src/Theme/resolvers.cjs');
 require('../../../packages/types/src/Theme/alphaColors.cjs');
 require('../../../apps/mobile/src/Factory/helpers/cssVarMap.cjs');
 require('i18next');

package/form-renderer/components/layout/FieldWrapper.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FieldWrapper.cjs","sources":["../../../../../src/form-renderer/components/layout/FieldWrapper.native.tsx"],"sourcesContent":["// components/layout/FieldWrapper.native.tsx\n\nimport React, {useCallback, useEffect, useMemo, useRef} from \"react\";\nimport type {FieldValues} from \"react-hook-form\";\nimport {useWatch} from \"react-hook-form\";\nimport {useFieldLogic} from \"../../hooks\";\nimport type {FieldWrapperProps, GroupFieldConfigs} from \"@lmb-it/kitsconcerto-types\";\nimport {Flex} from \"../../../_compat\";\nimport {createStyleContext, resolveResponsiveValue} from \"@lmb-it/kitsconcertomobile\";\n\n/**\n * Native layout contract:\n * - Container MUST be flex-row + flex-wrap\n * - Grid semantics are approximated via percentages\n *\n * Supported mappings:\n * - columns           -> virtual column count\n * - colSpan           -> width %\n * - colOffset         -> marginLeft %\n * - columnGap         -> item horizontal padding\n * - rowGap            -> item vertical padding\n * - rowSpan           -> minHeight approximation\n *\n * Ignored (grid-only semantics):\n * - templateAreas\n * - area\n * - gridTemplateRows\n * - gridTemplateColumns\n * - rowStart / rowEnd\n * - colStart / colEnd\n */\n\nconst DEFAULT_COLUMNS = 12;\nconst DEFAULT_ROW_HEIGHT = 56;\n\nexport const FieldWrapper = <T extends FieldValues>({\n                                                        element,\n                                                        control,\n                                                        getValues,\n                                                        setFocusedField,\n                                                        focusedField,\n                                                        children,\n                                                        grid,\n                                                        onGridChange,\n                                                        groupField,\n                                                    }: FieldWrapperProps<T>) => {\n    /* ---------------- helpers (no hooks) ---------------- */\n\n    const currentLayout = useRef<any>(null);\n    const resolveDepPath = (dep: string, groupField?: GroupFieldConfigs<T>['groupField']): string => {\n        if (!groupField || groupField.index === undefined || groupField.index < 0) return dep;\n\n        const parts = dep.split(\".\");\n        const {name, index} = groupField;\n\n        // Must be \"<groupRef>.current.<field...>\"\n        if (parts.length < 2 || parts[1] !== \"current\") return dep;\n\n        // Group-relative deps are authored against the group's own id\n        // (e.g. \"addresses.current.x\"). When the group is nested inside an\n        // Object the live `name` is the fully-qualified dotted path\n        // (e.g. \"addressGroup.addresses\"), so match the dep's first segment\n        // against EITHER the full name or its trailing segment, then rebuild\n        // against the fully-qualified name so useWatch hits the real path.\n        const nameLast = name.includes(\".\") ? name.slice(name.lastIndexOf(\".\") + 1) : name;\n        if (parts[0] !== name && parts[0] !== nameLast) return dep;\n\n        return [name, String(index), ...parts.slice(2)].join(\".\");\n    };\n\n    const flattenPaths = (obj: any, prefix = ''): string[] =>\n        Object.keys(obj ?? {}).flatMap((key) => {\n            const path = prefix ? `${prefix}.${key}` : key;\n            return typeof obj[key] === 'object' && obj[key] !== null\n                ? [path, ...flattenPaths(obj[key], path)]\n                : [path];\n        });\n\n    // 1. Determine which fields to watch for changes.\n    const dependencies = useMemo(() => {\n        const deps = new Set<string>([...(element.deps ?? []), ...(element.logic?.deps ?? [])]);\n\n        if (deps.has('*')) {\n            return flattenPaths(getValues());\n        }\n\n        return Array.from(deps).map((d) => resolveDepPath(d, groupField));\n    }, [element, groupField]);\n\n\n    // 2. Efficiently watch only the necessary fields.\n    const watchedValues = useWatch({\n        name: dependencies as any,\n        compute:(fieldValue)=>{\n            return fieldValue\n        },\n        exact:true,\n        disabled:dependencies.length === 0\n    });\n\n    useEffect(() => {\n        // console.log('watchedValues', watchedValues)\n    }, [watchedValues]);\n    // This single hook provides all the necessary logic and state for the field.\n    const fieldLogic = useFieldLogic({element, control, getValues, isFocused: focusedField === element.id, groupField, watchedValues});\n\n    const {\n        field,\n        isShown,\n        layout,\n        style:elementStyle,\n        animation\n    } = fieldLogic;\n    const isFocused = focusedField === field.name;\n\n    const onFocus = useCallback(() => setFocusedField(field.name), [setFocusedField, field.name]);\n    const onBlur: React.FocusEventHandler<any> = useCallback((event) => {\n        const cl = event.target['className'];\n        // @ts-ignore\n        if(!cl || cl.includes(`${element.id}_option_item`) || cl.includes(`p-multiselect-filter`)){\n            return;\n        }\n        setFocusedField('');\n        field.onBlur(); // Call the original onBlur from react-hook-form\n    }, [setFocusedField, field.onBlur]);\n\n    // Grid layout effect — MUST be before any conditional return (Rules of Hooks)\n    useEffect(() => {\n        if(layout.colSpan && currentLayout.current != JSON.stringify(layout)){\n            const ctx = createStyleContext();\n\n            const colSpan = resolveResponsiveValue<string | number>(layout.colSpan, ctx);\n\n            onGridChange?.(colSpan?.toString() ?? '12')\n\n            currentLayout.current = JSON.stringify(layout)\n        }\n\n    }, [layout]);\n\n    // If the logic dictates this field should not be shown, render nothing.\n    if (!isShown || !children) {\n        return null;\n    }\n\n\n\n    // @ts-ignore\n    return <Flex {...elementStyle?.container} {...animation}\n                 zIndex={isFocused ? 1000 : undefined}\n                 w={'100%'} onTouchStart={onFocus}>\n        {children(fieldLogic)}\n    </Flex>\n};\n"],"names":["useRef","groupField","useMemo","useWatch","useEffect","useFieldLogic","useCallback","createStyleContext","resolveResponsiveValue","jsx","Flex"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCO,MAAM,eAAe,CAAwB;AAAA,EACI,OAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,eAAA;AAAA,EACA,YAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAA;AAAA,EACA,YAAA;AAAA,EACA;AACJ,CAAA,KAA4B;AAG5E,EAAA,MAAM,aAAA,GAAgBA,aAAY,IAAI,CAAA;AACtC,EAAA,MAAM,cAAA,GAAiB,CAAC,GAAA,EAAaC,WAAAA,KAA4D;AAC7F,IAAA,IAAI,CAACA,eAAcA,WAAAA,CAAW,KAAA,KAAU,UAAaA,WAAAA,CAAW,KAAA,GAAQ,GAAG,OAAO,GAAA;AAElF,IAAA,MAAM,KAAA,GAAQ,GAAA,CAAI,KAAA,CAAM,GAAG,CAAA;AAC3B,IAAA,MAAM,EAAC,IAAA,EAAM,KAAA,EAAK,GAAIA,WAAAA;AAGtB,IAAA,IAAI,MAAM,MAAA,GAAS,CAAA,IAAK,MAAM,CAAC,CAAA,KAAM,WAAW,OAAO,GAAA;AAQvD,IAAA,MAAM,QAAA,GAAW,IAAA,CAAK,QAAA,CAAS,GAAG,CAAA,GAAI,IAAA,CAAK,KAAA,CAAM,IAAA,CAAK,WAAA,CAAY,GAAG,CAAA,GAAI,CAAC,CAAA,GAAI,IAAA;AAC9E,IAAA,IAAI,KAAA,CAAM,CAAC,CAAA,KAAM,IAAA,IAAQ,MAAM,CAAC,CAAA,KAAM,UAAU,OAAO,GAAA;AAEvD,IAAA,OAAO,CAAC,IAAA,EAAM,MAAA,CAAO,KAAK,CAAA,EAAG,GAAG,KAAA,CAAM,KAAA,CAAM,CAAC,CAAC,CAAA,CAAE,IAAA,CAAK,GAAG,CAAA;AAAA,EAC5D,CAAA;AAEA,EAAA,MAAM,YAAA,GAAe,CAAC,GAAA,EAAU,MAAA,GAAS,EAAA,KACrC,MAAA,CAAO,IAAA,CAAK,GAAA,IAAO,EAAE,CAAA,CAAE,OAAA,CAAQ,CAAC,GAAA,KAAQ;AACpC,IAAA,MAAM,OAAO,MAAA,GAAS,CAAA,EAAG,MAAM,CAAA,CAAA,EAAI,GAAG,CAAA,CAAA,GAAK,GAAA;AAC3C,IAAA,OAAO,OAAO,IAAI,GAAG,CAAA,KAAM,YAAY,GAAA,CAAI,GAAG,MAAM,IAAA,GAC9C,CAAC,MAAM,GAAG,YAAA,CAAa,IAAI,GAAG,CAAA,EAAG,IAAI,CAAC,CAAA,GACtC,CAAC,IAAI,CAAA;AAAA,EACf,CAAC,CAAA;AAGL,EAAA,MAAM,YAAA,GAAeC,cAAQ,MAAM;AAC/B,IAAA,MAAM,IAAA,mBAAO,IAAI,GAAA,CAAY,CAAC,GAAI,OAAA,CAAQ,IAAA,IAAQ,EAAC,EAAI,GAAI,OAAA,CAAQ,KAAA,EAAO,IAAA,IAAQ,EAAG,CAAC,CAAA;AAEtF,IAAA,IAAI,IAAA,CAAK,GAAA,CAAI,GAAG,CAAA,EAAG;AACf,MAAA,OAAO,YAAA,CAAa,WAAW,CAAA;AAAA,IACnC;AAEA,IAAA,OAAO,KAAA,CAAM,IAAA,CAAK,IAAI,CAAA,CAAE,GAAA,CAAI,CAAC,CAAA,KAAM,cAAA,CAAe,CAAA,EAAG,UAAU,CAAC,CAAA;AAAA,EACpE,CAAA,EAAG,CAAC,OAAA,EAAS,UAAU,CAAC,CAAA;AAIxB,EAAA,MAAM,gBAAgBC,sBAAA,CAAS;AAAA,IAC3B,IAAA,EAAM,YAAA;AAAA,IACN,OAAA,EAAQ,CAAC,UAAA,KAAa;AAClB,MAAA,OAAO,UAAA;AAAA,IACX,CAAA;AAAA,IACA,KAAA,EAAM,IAAA;AAAA,IACN,QAAA,EAAS,aAAa,MAAA,KAAW;AAAA,GACpC,CAAA;AAED,EAAAC,eAAA,CAAU,MAAM;AAAA,EAEhB,CAAA,EAAG,CAAC,aAAa,CAAC,CAAA;AAElB,EAAA,MAAM,UAAA,GAAaC,2BAAA,CAAc,EAAC,OAAA,EAAS,OAAA,EAAS,SAAA,EAAW,SAAA,EAAW,YAAA,KAAiB,OAAA,CAAQ,EAAA,EAAI,UAAA,EAAY,aAAA,EAAc,CAAA;AAEjI,EAAA,MAAM;AAAA,IACF,KAAA;AAAA,IACA,OAAA;AAAA,IACA,MAAA;AAAA,IACA,KAAA,EAAM,YAAA;AAAA,IACN;AAAA,GACJ,GAAI,UAAA;AACJ,EAAA,MAAM,SAAA,GAAY,iBAAiB,KAAA,CAAM,IAAA;AAEzC,EAAA,MAAM,OAAA,GAAUC,iBAAA,CAAY,MAAM,eAAA,CAAgB,KAAA,CAAM,IAAI,CAAA,EAAG,CAAC,eAAA,EAAiB,KAAA,CAAM,IAAI,CAAC,CAAA;AAC5F,EAA6CA,iBAAA,CAAY,CAAC,KAAA,KAAU;AAChE,IAAA,MAAM,EAAA,GAAK,KAAA,CAAM,MAAA,CAAO,WAAW,CAAA;AAEnC,IAAA,IAAG,CAAC,EAAA,IAAM,EAAA,CAAG,QAAA,CAAS,CAAA,EAAG,OAAA,CAAQ,EAAE,CAAA,YAAA,CAAc,CAAA,IAAK,EAAA,CAAG,QAAA,CAAS,CAAA,oBAAA,CAAsB,CAAA,EAAE;AACtF,MAAA;AAAA,IACJ;AACA,IAAA,eAAA,CAAgB,EAAE,CAAA;AAClB,IAAA,KAAA,CAAM,MAAA,EAAO;AAAA,EACjB,CAAA,EAAG,CAAC,eAAA,EAAiB,KAAA,CAAM,MAAM,CAAC;AAGlC,EAAAF,eAAA,CAAU,MAAM;AACZ,IAAA,IAAG,OAAO,OAAA,IAAW,aAAA,CAAc,WAAW,IAAA,CAAK,SAAA,CAAU,MAAM,CAAA,EAAE;AACjE,MAAA,MAAM,MAAMG,wBAAA,EAAmB;AAE/B,MAAA,MAAM,OAAA,GAAUC,4BAAA,CAAwC,MAAA,CAAO,OAAA,EAAS,GAAG,CAAA;AAE3E,MAAA,YAAA,GAAe,OAAA,EAAS,QAAA,EAAS,IAAK,IAAI,CAAA;AAE1C,MAAA,aAAA,CAAc,OAAA,GAAU,IAAA,CAAK,SAAA,CAAU,MAAM,CAAA;AAAA,IACjD;AAAA,EAEJ,CAAA,EAAG,CAAC,MAAM,CAAC,CAAA;AAGX,EAAA,IAAI,CAAC,OAAA,IAAW,CAAC,QAAA,EAAU;AACvB,IAAA,OAAO,IAAA;AAAA,EACX;AAKA,EAAA,uBAAOC,cAAA;AAAA,IAACC,aAAA;AAAA,IAAA;AAAA,MAAM,GAAG,YAAA,EAAc,SAAA;AAAA,MAAY,GAAG,SAAA;AAAA,MACjC,MAAA,EAAQ,YAAY,GAAA,GAAO,MAAA;AAAA,MAC3B,CAAA,EAAG,MAAA;AAAA,MAAQ,YAAA,EAAc,OAAA;AAAA,MACjC,mBAAS,UAAU;AAAA;AAAA,GACxB;AACJ;;;;"}
+{"version":3,"file":"FieldWrapper.cjs","sources":["../../../../../src/form-renderer/components/layout/FieldWrapper.native.tsx"],"sourcesContent":["// components/layout/FieldWrapper.native.tsx\n\nimport React, {useCallback, useEffect, useMemo, useRef} from \"react\";\nimport type {FieldValues} from \"react-hook-form\";\nimport {useWatch} from \"react-hook-form\";\nimport {useFieldLogic} from \"../../hooks\";\nimport type {FieldWrapperProps, GroupFieldConfigs} from \"@lmb-it/kitsconcerto-types\";\nimport {Flex} from \"../../../_compat\";\nimport {createStyleContext, resolveResponsiveValue} from \"@lmb-it/kitsconcertomobile\";\n\n/**\n * Native layout contract:\n * - Container MUST be flex-row + flex-wrap\n * - Grid semantics are approximated via percentages\n *\n * Supported mappings:\n * - columns           -> virtual column count\n * - colSpan           -> width %\n * - colOffset         -> marginLeft %\n * - columnGap         -> item horizontal padding\n * - rowGap            -> item vertical padding\n * - rowSpan           -> minHeight approximation\n *\n * Ignored (grid-only semantics):\n * - templateAreas\n * - area\n * - gridTemplateRows\n * - gridTemplateColumns\n * - rowStart / rowEnd\n * - colStart / colEnd\n */\n\nconst DEFAULT_COLUMNS = 12;\nconst DEFAULT_ROW_HEIGHT = 56;\n\nexport const FieldWrapper = <T extends FieldValues>({\n                                                        element,\n                                                        control,\n                                                        getValues,\n                                                        setFocusedField,\n                                                        focusedField,\n                                                        children,\n                                                        grid,\n                                                        onGridChange,\n                                                        groupField,\n                                                    }: FieldWrapperProps<T>) => {\n    /* ---------------- helpers (no hooks) ---------------- */\n\n    const currentLayout = useRef<any>(null);\n    const resolveDepPath = (dep: string, groupField?: GroupFieldConfigs<T>['groupField']): string => {\n        if (!groupField || groupField.index === undefined || groupField.index < 0) return dep;\n\n        const parts = dep.split(\".\");\n        const {name, index} = groupField;\n\n        // Must be \"<groupRef>.current.<field...>\"\n        if (parts.length < 2 || parts[1] !== \"current\") return dep;\n\n        // Group-relative deps are authored against the group's own id\n        // (e.g. \"addresses.current.x\"). When the group is nested inside an\n        // Object the live `name` is the fully-qualified dotted path\n        // (e.g. \"addressGroup.addresses\"), so match the dep's first segment\n        // against EITHER the full name or its trailing segment, then rebuild\n        // against the fully-qualified name so useWatch hits the real path.\n        const nameLast = name.includes(\".\") ? name.slice(name.lastIndexOf(\".\") + 1) : name;\n        if (parts[0] !== name && parts[0] !== nameLast) return dep;\n\n        return [name, String(index), ...parts.slice(2)].join(\".\");\n    };\n\n    const flattenPaths = (obj: any, prefix = ''): string[] =>\n        Object.keys(obj ?? {}).flatMap((key) => {\n            const path = prefix ? `${prefix}.${key}` : key;\n            return typeof obj[key] === 'object' && obj[key] !== null\n                ? [path, ...flattenPaths(obj[key], path)]\n                : [path];\n        });\n\n    // 1. Determine which fields to watch for changes.\n    const dependencies = useMemo(() => {\n        const deps = new Set<string>([...(element.deps ?? []), ...(element.logic?.deps ?? [])]);\n\n        if (deps.has('*')) {\n            return flattenPaths(getValues());\n        }\n\n        return Array.from(deps).map((d) => resolveDepPath(d, groupField));\n    }, [element, groupField]);\n\n\n    // 2. Efficiently watch only the necessary fields.\n    const watchedValues = useWatch({\n        name: dependencies as any,\n        compute:(fieldValue)=>{\n            return fieldValue\n        },\n        exact:true,\n        disabled:dependencies.length === 0\n    });\n\n    useEffect(() => {\n        // console.log('watchedValues', watchedValues)\n    }, [watchedValues]);\n    // This single hook provides all the necessary logic and state for the field.\n    const fieldLogic = useFieldLogic({element, control, getValues, isFocused: focusedField === element.id, groupField, watchedValues});\n\n    const {\n        field,\n        isShown,\n        layout,\n        style:elementStyle,\n        animation\n    } = fieldLogic;\n    const isFocused = focusedField === field.name;\n\n    const onFocus = useCallback(() => setFocusedField(field.name), [setFocusedField, field.name]);\n    const onBlur: React.FocusEventHandler<any> = useCallback((event) => {\n        const cl = event.target['className'];\n        // @ts-ignore\n        if(!cl || cl.includes(`${element.id}_option_item`) || cl.includes(`p-multiselect-filter`)){\n            return;\n        }\n        setFocusedField('');\n        field.onBlur(); // Call the original onBlur from react-hook-form\n    }, [setFocusedField, field.onBlur]);\n\n    // Grid layout effect — MUST be before any conditional return (Rules of Hooks)\n    useEffect(() => {\n        if(layout.colSpan && currentLayout.current != JSON.stringify(layout)){\n            const ctx = createStyleContext();\n\n            const colSpan = resolveResponsiveValue<string | number>(layout.colSpan, ctx);\n\n            onGridChange?.(colSpan?.toString() ?? '12')\n\n            currentLayout.current = JSON.stringify(layout)\n        }\n\n    }, [layout]);\n\n    // If the logic dictates this field should not be shown, render nothing.\n    if (!isShown || !children) {\n        return null;\n    }\n\n\n\n    // @ts-ignore\n    return <Flex {...elementStyle?.container} {...animation}\n                 zIndex={isFocused ? 1000 : undefined}\n                 w={'100%'} onTouchStart={onFocus}>\n        {children(fieldLogic)}\n    </Flex>\n};\n"],"names":["useRef","groupField","useMemo","useWatch","useEffect","useFieldLogic","useCallback","createStyleContext","resolveResponsiveValue","jsx","Flex"],"mappings":"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"}

package/form-renderer/components/layout/FieldWrapper.js

@@ -62,6 +62,7 @@ import '../../../packages/types/src/Components/Molecules/Form/FilePicker/types/f
 import '../../../packages/types/src/Css/map/index.js';
 import '../../../packages/types/src/Theme/shadows.js';
 import '../../../packages/types/src/Theme/defaultTheme.js';
+import '../../../packages/types/src/Theme/resolvers.js';
 import '../../../packages/types/src/Theme/alphaColors.js';
 import '../../../apps/mobile/src/Factory/helpers/cssVarMap.js';
 import 'i18next';

package/form-renderer/components/layout/FieldWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldWrapper.js","sources":["../../../../../src/form-renderer/components/layout/FieldWrapper.native.tsx"],"sourcesContent":["// components/layout/FieldWrapper.native.tsx\n\nimport React, {useCallback, useEffect, useMemo, useRef} from \"react\";\nimport type {FieldValues} from \"react-hook-form\";\nimport {useWatch} from \"react-hook-form\";\nimport {useFieldLogic} from \"../../hooks\";\nimport type {FieldWrapperProps, GroupFieldConfigs} from \"@lmb-it/kitsconcerto-types\";\nimport {Flex} from \"../../../_compat\";\nimport {createStyleContext, resolveResponsiveValue} from \"@lmb-it/kitsconcertomobile\";\n\n/**\n * Native layout contract:\n * - Container MUST be flex-row + flex-wrap\n * - Grid semantics are approximated via percentages\n *\n * Supported mappings:\n * - columns           -> virtual column count\n * - colSpan           -> width %\n * - colOffset         -> marginLeft %\n * - columnGap         -> item horizontal padding\n * - rowGap            -> item vertical padding\n * - rowSpan           -> minHeight approximation\n *\n * Ignored (grid-only semantics):\n * - templateAreas\n * - area\n * - gridTemplateRows\n * - gridTemplateColumns\n * - rowStart / rowEnd\n * - colStart / colEnd\n */\n\nconst DEFAULT_COLUMNS = 12;\nconst DEFAULT_ROW_HEIGHT = 56;\n\nexport const FieldWrapper = <T extends FieldValues>({\n                                                        element,\n                                                        control,\n                                                        getValues,\n                                                        setFocusedField,\n                                                        focusedField,\n                                                        children,\n                                                        grid,\n                                                        onGridChange,\n                                                        groupField,\n                                                    }: FieldWrapperProps<T>) => {\n    /* ---------------- helpers (no hooks) ---------------- */\n\n    const currentLayout = useRef<any>(null);\n    const resolveDepPath = (dep: string, groupField?: GroupFieldConfigs<T>['groupField']): string => {\n        if (!groupField || groupField.index === undefined || groupField.index < 0) return dep;\n\n        const parts = dep.split(\".\");\n        const {name, index} = groupField;\n\n        // Must be \"<groupRef>.current.<field...>\"\n        if (parts.length < 2 || parts[1] !== \"current\") return dep;\n\n        // Group-relative deps are authored against the group's own id\n        // (e.g. \"addresses.current.x\"). When the group is nested inside an\n        // Object the live `name` is the fully-qualified dotted path\n        // (e.g. \"addressGroup.addresses\"), so match the dep's first segment\n        // against EITHER the full name or its trailing segment, then rebuild\n        // against the fully-qualified name so useWatch hits the real path.\n        const nameLast = name.includes(\".\") ? name.slice(name.lastIndexOf(\".\") + 1) : name;\n        if (parts[0] !== name && parts[0] !== nameLast) return dep;\n\n        return [name, String(index), ...parts.slice(2)].join(\".\");\n    };\n\n    const flattenPaths = (obj: any, prefix = ''): string[] =>\n        Object.keys(obj ?? {}).flatMap((key) => {\n            const path = prefix ? `${prefix}.${key}` : key;\n            return typeof obj[key] === 'object' && obj[key] !== null\n                ? [path, ...flattenPaths(obj[key], path)]\n                : [path];\n        });\n\n    // 1. Determine which fields to watch for changes.\n    const dependencies = useMemo(() => {\n        const deps = new Set<string>([...(element.deps ?? []), ...(element.logic?.deps ?? [])]);\n\n        if (deps.has('*')) {\n            return flattenPaths(getValues());\n        }\n\n        return Array.from(deps).map((d) => resolveDepPath(d, groupField));\n    }, [element, groupField]);\n\n\n    // 2. Efficiently watch only the necessary fields.\n    const watchedValues = useWatch({\n        name: dependencies as any,\n        compute:(fieldValue)=>{\n            return fieldValue\n        },\n        exact:true,\n        disabled:dependencies.length === 0\n    });\n\n    useEffect(() => {\n        // console.log('watchedValues', watchedValues)\n    }, [watchedValues]);\n    // This single hook provides all the necessary logic and state for the field.\n    const fieldLogic = useFieldLogic({element, control, getValues, isFocused: focusedField === element.id, groupField, watchedValues});\n\n    const {\n        field,\n        isShown,\n        layout,\n        style:elementStyle,\n        animation\n    } = fieldLogic;\n    const isFocused = focusedField === field.name;\n\n    const onFocus = useCallback(() => setFocusedField(field.name), [setFocusedField, field.name]);\n    const onBlur: React.FocusEventHandler<any> = useCallback((event) => {\n        const cl = event.target['className'];\n        // @ts-ignore\n        if(!cl || cl.includes(`${element.id}_option_item`) || cl.includes(`p-multiselect-filter`)){\n            return;\n        }\n        setFocusedField('');\n        field.onBlur(); // Call the original onBlur from react-hook-form\n    }, [setFocusedField, field.onBlur]);\n\n    // Grid layout effect — MUST be before any conditional return (Rules of Hooks)\n    useEffect(() => {\n        if(layout.colSpan && currentLayout.current != JSON.stringify(layout)){\n            const ctx = createStyleContext();\n\n            const colSpan = resolveResponsiveValue<string | number>(layout.colSpan, ctx);\n\n            onGridChange?.(colSpan?.toString() ?? '12')\n\n            currentLayout.current = JSON.stringify(layout)\n        }\n\n    }, [layout]);\n\n    // If the logic dictates this field should not be shown, render nothing.\n    if (!isShown || !children) {\n        return null;\n    }\n\n\n\n    // @ts-ignore\n    return <Flex {...elementStyle?.container} {...animation}\n                 zIndex={isFocused ? 1000 : undefined}\n                 w={'100%'} onTouchStart={onFocus}>\n        {children(fieldLogic)}\n    </Flex>\n};\n"],"names":["groupField"],"mappings":"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"}
+{"version":3,"file":"FieldWrapper.js","sources":["../../../../../src/form-renderer/components/layout/FieldWrapper.native.tsx"],"sourcesContent":["// components/layout/FieldWrapper.native.tsx\n\nimport React, {useCallback, useEffect, useMemo, useRef} from \"react\";\nimport type {FieldValues} from \"react-hook-form\";\nimport {useWatch} from \"react-hook-form\";\nimport {useFieldLogic} from \"../../hooks\";\nimport type {FieldWrapperProps, GroupFieldConfigs} from \"@lmb-it/kitsconcerto-types\";\nimport {Flex} from \"../../../_compat\";\nimport {createStyleContext, resolveResponsiveValue} from \"@lmb-it/kitsconcertomobile\";\n\n/**\n * Native layout contract:\n * - Container MUST be flex-row + flex-wrap\n * - Grid semantics are approximated via percentages\n *\n * Supported mappings:\n * - columns           -> virtual column count\n * - colSpan           -> width %\n * - colOffset         -> marginLeft %\n * - columnGap         -> item horizontal padding\n * - rowGap            -> item vertical padding\n * - rowSpan           -> minHeight approximation\n *\n * Ignored (grid-only semantics):\n * - templateAreas\n * - area\n * - gridTemplateRows\n * - gridTemplateColumns\n * - rowStart / rowEnd\n * - colStart / colEnd\n */\n\nconst DEFAULT_COLUMNS = 12;\nconst DEFAULT_ROW_HEIGHT = 56;\n\nexport const FieldWrapper = <T extends FieldValues>({\n                                                        element,\n                                                        control,\n                                                        getValues,\n                                                        setFocusedField,\n                                                        focusedField,\n                                                        children,\n                                                        grid,\n                                                        onGridChange,\n                                                        groupField,\n                                                    }: FieldWrapperProps<T>) => {\n    /* ---------------- helpers (no hooks) ---------------- */\n\n    const currentLayout = useRef<any>(null);\n    const resolveDepPath = (dep: string, groupField?: GroupFieldConfigs<T>['groupField']): string => {\n        if (!groupField || groupField.index === undefined || groupField.index < 0) return dep;\n\n        const parts = dep.split(\".\");\n        const {name, index} = groupField;\n\n        // Must be \"<groupRef>.current.<field...>\"\n        if (parts.length < 2 || parts[1] !== \"current\") return dep;\n\n        // Group-relative deps are authored against the group's own id\n        // (e.g. \"addresses.current.x\"). When the group is nested inside an\n        // Object the live `name` is the fully-qualified dotted path\n        // (e.g. \"addressGroup.addresses\"), so match the dep's first segment\n        // against EITHER the full name or its trailing segment, then rebuild\n        // against the fully-qualified name so useWatch hits the real path.\n        const nameLast = name.includes(\".\") ? name.slice(name.lastIndexOf(\".\") + 1) : name;\n        if (parts[0] !== name && parts[0] !== nameLast) return dep;\n\n        return [name, String(index), ...parts.slice(2)].join(\".\");\n    };\n\n    const flattenPaths = (obj: any, prefix = ''): string[] =>\n        Object.keys(obj ?? {}).flatMap((key) => {\n            const path = prefix ? `${prefix}.${key}` : key;\n            return typeof obj[key] === 'object' && obj[key] !== null\n                ? [path, ...flattenPaths(obj[key], path)]\n                : [path];\n        });\n\n    // 1. Determine which fields to watch for changes.\n    const dependencies = useMemo(() => {\n        const deps = new Set<string>([...(element.deps ?? []), ...(element.logic?.deps ?? [])]);\n\n        if (deps.has('*')) {\n            return flattenPaths(getValues());\n        }\n\n        return Array.from(deps).map((d) => resolveDepPath(d, groupField));\n    }, [element, groupField]);\n\n\n    // 2. Efficiently watch only the necessary fields.\n    const watchedValues = useWatch({\n        name: dependencies as any,\n        compute:(fieldValue)=>{\n            return fieldValue\n        },\n        exact:true,\n        disabled:dependencies.length === 0\n    });\n\n    useEffect(() => {\n        // console.log('watchedValues', watchedValues)\n    }, [watchedValues]);\n    // This single hook provides all the necessary logic and state for the field.\n    const fieldLogic = useFieldLogic({element, control, getValues, isFocused: focusedField === element.id, groupField, watchedValues});\n\n    const {\n        field,\n        isShown,\n        layout,\n        style:elementStyle,\n        animation\n    } = fieldLogic;\n    const isFocused = focusedField === field.name;\n\n    const onFocus = useCallback(() => setFocusedField(field.name), [setFocusedField, field.name]);\n    const onBlur: React.FocusEventHandler<any> = useCallback((event) => {\n        const cl = event.target['className'];\n        // @ts-ignore\n        if(!cl || cl.includes(`${element.id}_option_item`) || cl.includes(`p-multiselect-filter`)){\n            return;\n        }\n        setFocusedField('');\n        field.onBlur(); // Call the original onBlur from react-hook-form\n    }, [setFocusedField, field.onBlur]);\n\n    // Grid layout effect — MUST be before any conditional return (Rules of Hooks)\n    useEffect(() => {\n        if(layout.colSpan && currentLayout.current != JSON.stringify(layout)){\n            const ctx = createStyleContext();\n\n            const colSpan = resolveResponsiveValue<string | number>(layout.colSpan, ctx);\n\n            onGridChange?.(colSpan?.toString() ?? '12')\n\n            currentLayout.current = JSON.stringify(layout)\n        }\n\n    }, [layout]);\n\n    // If the logic dictates this field should not be shown, render nothing.\n    if (!isShown || !children) {\n        return null;\n    }\n\n\n\n    // @ts-ignore\n    return <Flex {...elementStyle?.container} {...animation}\n                 zIndex={isFocused ? 1000 : undefined}\n                 w={'100%'} onTouchStart={onFocus}>\n        {children(fieldLogic)}\n    </Flex>\n};\n"],"names":["groupField"],"mappings":"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"}

package/hooks/shadowPresets.cjs

@@ -8,6 +8,7 @@ require('yup');
 require('../packages/types/src/Css/map/index.cjs');
 var shadows = require('../packages/types/src/Theme/shadows.cjs');
 require('../packages/types/src/Theme/defaultTheme.cjs');
+require('../packages/types/src/Theme/resolvers.cjs');
 require('../packages/types/src/Theme/alphaColors.cjs');
 
 function expandShadow(value, _resolveToken) {

package/hooks/shadowPresets.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"shadowPresets.cjs","sources":["../../../src/hooks/shadowPresets.native.ts"],"sourcesContent":["import {expandShadowNative} from '@lmb-it/kitsconcerto-types';\n\n/**\n * Cross-platform shadow expansion — NATIVE (iOS + Android).\n *\n * A `shadow: 'md'` style key resolves to the active native shadow scale\n * (`shadowColor/shadowOffset/shadowOpacity/shadowRadius/elevation`), published\n * by the native KitsThemeProvider from `theme.shadows.md.native` — so\n * overriding the theme overrides the shadow. Unknown values yield `{}` (raw CSS\n * box-shadow strings / `$shadows.*` tokens cannot render on RN).\n *\n * Web counterpart: ./shadowPresets.web.ts.\n */\nexport function expandShadow(\n    value: string,\n    _resolveToken?: (token: string) => string,\n): Record<string, any> {\n    return value ? expandShadowNative(value) : {};\n}\n"],"names":["expandShadowNative"],"mappings":";;;;;;;;;;;;AAaO,SAAS,YAAA,CACZ,OACA,aAAA,EACmB;AACnB,EAAA,OAAO,KAAA,GAAQA,0BAAA,CAAmB,KAAK,CAAA,GAAI,EAAC;AAChD;;;;"}
+{"version":3,"file":"shadowPresets.cjs","sources":["../../../src/hooks/shadowPresets.native.ts"],"sourcesContent":["import {expandShadowNative} from '@lmb-it/kitsconcerto-types';\n\n/**\n * Cross-platform shadow expansion — NATIVE (iOS + Android).\n *\n * A `shadow: 'md'` style key resolves to the active native shadow scale\n * (`shadowColor/shadowOffset/shadowOpacity/shadowRadius/elevation`), published\n * by the native KitsThemeProvider from `theme.shadows.md.native` — so\n * overriding the theme overrides the shadow. Unknown values yield `{}` (raw CSS\n * box-shadow strings / `$shadows.*` tokens cannot render on RN).\n *\n * Web counterpart: ./shadowPresets.web.ts.\n */\nexport function expandShadow(\n    value: string,\n    _resolveToken?: (token: string) => string,\n): Record<string, any> {\n    return value ? expandShadowNative(value) : {};\n}\n"],"names":["expandShadowNative"],"mappings":";;;;;;;;;;;;;AAaO,SAAS,YAAA,CACZ,OACA,aAAA,EACmB;AACnB,EAAA,OAAO,KAAA,GAAQA,0BAAA,CAAmB,KAAK,CAAA,GAAI,EAAC;AAChD;;;;"}

package/hooks/shadowPresets.js

@@ -6,6 +6,7 @@ import 'yup';
 import '../packages/types/src/Css/map/index.js';
 import { expandShadowNative } from '../packages/types/src/Theme/shadows.js';
 import '../packages/types/src/Theme/defaultTheme.js';
+import '../packages/types/src/Theme/resolvers.js';
 import '../packages/types/src/Theme/alphaColors.js';
 
 function expandShadow(value, _resolveToken) {

package/hooks/shadowPresets.js.map

@@ -1 +1 @@
-{"version":3,"file":"shadowPresets.js","sources":["../../../src/hooks/shadowPresets.native.ts"],"sourcesContent":["import {expandShadowNative} from '@lmb-it/kitsconcerto-types';\n\n/**\n * Cross-platform shadow expansion — NATIVE (iOS + Android).\n *\n * A `shadow: 'md'` style key resolves to the active native shadow scale\n * (`shadowColor/shadowOffset/shadowOpacity/shadowRadius/elevation`), published\n * by the native KitsThemeProvider from `theme.shadows.md.native` — so\n * overriding the theme overrides the shadow. Unknown values yield `{}` (raw CSS\n * box-shadow strings / `$shadows.*` tokens cannot render on RN).\n *\n * Web counterpart: ./shadowPresets.web.ts.\n */\nexport function expandShadow(\n    value: string,\n    _resolveToken?: (token: string) => string,\n): Record<string, any> {\n    return value ? expandShadowNative(value) : {};\n}\n"],"names":[],"mappings":";;;;;;;;;;AAaO,SAAS,YAAA,CACZ,OACA,aAAA,EACmB;AACnB,EAAA,OAAO,KAAA,GAAQ,kBAAA,CAAmB,KAAK,CAAA,GAAI,EAAC;AAChD;;;;"}
+{"version":3,"file":"shadowPresets.js","sources":["../../../src/hooks/shadowPresets.native.ts"],"sourcesContent":["import {expandShadowNative} from '@lmb-it/kitsconcerto-types';\n\n/**\n * Cross-platform shadow expansion — NATIVE (iOS + Android).\n *\n * A `shadow: 'md'` style key resolves to the active native shadow scale\n * (`shadowColor/shadowOffset/shadowOpacity/shadowRadius/elevation`), published\n * by the native KitsThemeProvider from `theme.shadows.md.native` — so\n * overriding the theme overrides the shadow. Unknown values yield `{}` (raw CSS\n * box-shadow strings / `$shadows.*` tokens cannot render on RN).\n *\n * Web counterpart: ./shadowPresets.web.ts.\n */\nexport function expandShadow(\n    value: string,\n    _resolveToken?: (token: string) => string,\n): Record<string, any> {\n    return value ? expandShadowNative(value) : {};\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAaO,SAAS,YAAA,CACZ,OACA,aAAA,EACmB;AACnB,EAAA,OAAO,KAAA,GAAQ,kBAAA,CAAmB,KAAK,CAAA,GAAI,EAAC;AAChD;;;;"}

package/hooks/useFocusStyles.cjs

@@ -61,6 +61,7 @@ require('yup');
 require('../packages/types/src/Css/map/index.cjs');
 require('../packages/types/src/Theme/shadows.cjs');
 require('../packages/types/src/Theme/defaultTheme.cjs');
+require('../packages/types/src/Theme/resolvers.cjs');
 require('../packages/types/src/Theme/alphaColors.cjs');
 require('../apps/mobile/src/Factory/helpers/cssVarMap.cjs');
 require('i18next');

package/hooks/useFocusStyles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useFocusStyles.cjs","sources":["../../../src/hooks/useFocusStyles.native.ts"],"sourcesContent":["import {useMemo} from 'react';\nimport type {IStyleClasses} from '@lmb-it/kitsconcerto-types';\nimport {style} from '@lmb-it/kitsconcertomobile';\n\n/**\n * Native focus-style helper.\n * Merges `_focus` styles into the computed style object when `isFocused` is true.\n * Returns a React Native ViewStyle object ready for the `style` prop.\n */\nexport function useFocusStyles(\n    themeStyle: IStyleClasses | undefined,\n    isFocused: boolean,\n) {\n    return useMemo(() => {\n        if (!themeStyle) return {};\n        const {_focus, _hover, ...base} = themeStyle as any;\n        const baseStyle = style(base);\n        if (!isFocused || !_focus) return baseStyle;\n        const focusStyle = style(_focus);\n        return {...baseStyle, ...focusStyle};\n    }, [themeStyle, isFocused]);\n}\n\nexport default useFocusStyles;\n"],"names":["useMemo","style"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASO,SAAS,cAAA,CACZ,YACA,SAAA,EACF;AACE,EAAA,OAAOA,cAAQ,MAAM;AACjB,IAAA,IAAI,CAAC,UAAA,EAAY,OAAO,EAAC;AACzB,IAAA,MAAM,EAAC,MAAA,EAAQ,MAAA,EAAQ,GAAG,MAAI,GAAI,UAAA;AAClC,IAAA,MAAM,SAAA,GAAYC,YAAM,IAAI,CAAA;AAC5B,IAAA,IAAI,CAAC,SAAA,IAAa,CAAC,MAAA,EAAQ,OAAO,SAAA;AAClC,IAAA,MAAM,UAAA,GAAaA,YAAM,MAAM,CAAA;AAC/B,IAAA,OAAO,EAAC,GAAG,SAAA,EAAW,GAAG,UAAA,EAAU;AAAA,EACvC,CAAA,EAAG,CAAC,UAAA,EAAY,SAAS,CAAC,CAAA;AAC9B;;;;"}
+{"version":3,"file":"useFocusStyles.cjs","sources":["../../../src/hooks/useFocusStyles.native.ts"],"sourcesContent":["import {useMemo} from 'react';\nimport type {IStyleClasses} from '@lmb-it/kitsconcerto-types';\nimport {style} from '@lmb-it/kitsconcertomobile';\n\n/**\n * Native focus-style helper.\n * Merges `_focus` styles into the computed style object when `isFocused` is true.\n * Returns a React Native ViewStyle object ready for the `style` prop.\n */\nexport function useFocusStyles(\n    themeStyle: IStyleClasses | undefined,\n    isFocused: boolean,\n) {\n    return useMemo(() => {\n        if (!themeStyle) return {};\n        const {_focus, _hover, ...base} = themeStyle as any;\n        const baseStyle = style(base);\n        if (!isFocused || !_focus) return baseStyle;\n        const focusStyle = style(_focus);\n        return {...baseStyle, ...focusStyle};\n    }, [themeStyle, isFocused]);\n}\n\nexport default useFocusStyles;\n"],"names":["useMemo","style"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASO,SAAS,cAAA,CACZ,YACA,SAAA,EACF;AACE,EAAA,OAAOA,cAAQ,MAAM;AACjB,IAAA,IAAI,CAAC,UAAA,EAAY,OAAO,EAAC;AACzB,IAAA,MAAM,EAAC,MAAA,EAAQ,MAAA,EAAQ,GAAG,MAAI,GAAI,UAAA;AAClC,IAAA,MAAM,SAAA,GAAYC,YAAM,IAAI,CAAA;AAC5B,IAAA,IAAI,CAAC,SAAA,IAAa,CAAC,MAAA,EAAQ,OAAO,SAAA;AAClC,IAAA,MAAM,UAAA,GAAaA,YAAM,MAAM,CAAA;AAC/B,IAAA,OAAO,EAAC,GAAG,SAAA,EAAW,GAAG,UAAA,EAAU;AAAA,EACvC,CAAA,EAAG,CAAC,UAAA,EAAY,SAAS,CAAC,CAAA;AAC9B;;;;"}