@kbach/react 0.5.51 → 0.5.52
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{chunk-6YN6SRMN.mjs → chunk-6PRTRINF.mjs} +3 -3
- package/dist/{chunk-JVTA5SC3.mjs → chunk-7EUNJFX7.mjs} +87 -5
- package/dist/index.js +89 -7
- package/dist/index.mjs +3 -3
- package/dist/jsx-dev-runtime.js +89 -7
- package/dist/jsx-dev-runtime.mjs +2 -2
- package/dist/jsx-runtime.js +89 -7
- package/dist/jsx-runtime.mjs +2 -2
- package/package.json +1 -1
|
@@ -6,7 +6,7 @@ import {
|
|
|
6
6
|
transformToWebProps,
|
|
7
7
|
useConditionalWidth,
|
|
8
8
|
useGlobalDarkMode
|
|
9
|
-
} from "./chunk-
|
|
9
|
+
} from "./chunk-7EUNJFX7.mjs";
|
|
10
10
|
import {
|
|
11
11
|
flatten,
|
|
12
12
|
getActiveBreakpoints,
|
|
@@ -163,11 +163,11 @@ function stripWebOnlyInlineProps(s) {
|
|
|
163
163
|
}
|
|
164
164
|
function processElement(type, rawProps, key, isStaticChildren) {
|
|
165
165
|
if (typeof type === "symbol") return makeElement(isStaticChildren, type, rawProps ?? {}, key);
|
|
166
|
-
const webTag = isWeb ? getWebTag(type) : null;
|
|
166
|
+
const webTag = isWeb ? getWebTag(type, rawProps ?? void 0) : null;
|
|
167
167
|
const effectiveType = webTag ?? type;
|
|
168
168
|
const originalName = webTag ? type?.displayName ?? type?.name : void 0;
|
|
169
169
|
if (!rawProps) return _jsx(effectiveType, null, key);
|
|
170
|
-
const workingProps = webTag && originalName ? transformToWebProps(originalName, rawProps) : rawProps;
|
|
170
|
+
const workingProps = webTag && originalName ? transformToWebProps(originalName, webTag, rawProps) : rawProps;
|
|
171
171
|
const { className, kb: kbProp, __kbachStyles, __kbachClasses } = workingProps;
|
|
172
172
|
const classStr = className ?? kbProp ?? __kbachClasses;
|
|
173
173
|
if (!isNative && isRuntimeCSSDisabled() && classStr && !__kbachStyles) {
|
|
@@ -44,7 +44,12 @@ var _rnToHtml = {
|
|
|
44
44
|
KeyboardAvoidingView: "div",
|
|
45
45
|
ScrollView: "div",
|
|
46
46
|
VirtualizedList: "div",
|
|
47
|
+
FlatList: "div",
|
|
48
|
+
SectionList: "div",
|
|
47
49
|
Text: "span",
|
|
50
|
+
TextInput: "input",
|
|
51
|
+
Image: "img",
|
|
52
|
+
ImageBackground: "div",
|
|
48
53
|
Pressable: "div",
|
|
49
54
|
TouchableOpacity: "div",
|
|
50
55
|
TouchableHighlight: "div",
|
|
@@ -58,14 +63,22 @@ function registerWebElement(rnComponent, htmlTag) {
|
|
|
58
63
|
_userMap.set(rnComponent, htmlTag);
|
|
59
64
|
_cache.delete(rnComponent);
|
|
60
65
|
}
|
|
61
|
-
function getWebTag(type) {
|
|
66
|
+
function getWebTag(type, props) {
|
|
62
67
|
if (typeof type === "string") return null;
|
|
63
68
|
if (type === null || typeof type !== "function" && typeof type !== "object") return null;
|
|
64
69
|
const obj = type;
|
|
65
70
|
if (_userMap.has(obj)) return _userMap.get(obj);
|
|
66
|
-
if (_cache.has(obj)) return _cache.get(obj);
|
|
67
71
|
const name = obj.displayName ?? obj.name;
|
|
68
|
-
|
|
72
|
+
if (!name) {
|
|
73
|
+
_cache.set(obj, null);
|
|
74
|
+
return null;
|
|
75
|
+
}
|
|
76
|
+
if (name === "TextInput" && props) {
|
|
77
|
+
const multiline = props.multiline === true || Number(props.numberOfLines) > 1;
|
|
78
|
+
return multiline ? "textarea" : "input";
|
|
79
|
+
}
|
|
80
|
+
if (_cache.has(obj)) return _cache.get(obj);
|
|
81
|
+
const tag = _rnToHtml[name] ?? null;
|
|
69
82
|
_cache.set(obj, tag);
|
|
70
83
|
return tag;
|
|
71
84
|
}
|
|
@@ -85,8 +98,19 @@ var _rnOnlyProps = /* @__PURE__ */ new Set([
|
|
|
85
98
|
"needsOffscreenAlphaCompositing",
|
|
86
99
|
"renderToHardwareTextureAndroid",
|
|
87
100
|
"shouldRasterizeIOS",
|
|
88
|
-
"pointerEvents"
|
|
101
|
+
"pointerEvents",
|
|
89
102
|
// RN and HTML values differ
|
|
103
|
+
"multiline",
|
|
104
|
+
"numberOfLines",
|
|
105
|
+
// handled separately
|
|
106
|
+
"resizeMode",
|
|
107
|
+
// handled separately
|
|
108
|
+
"blurOnSubmit",
|
|
109
|
+
"clearButtonMode",
|
|
110
|
+
"clearTextOnFocus",
|
|
111
|
+
"enablesReturnKeyAutomatically",
|
|
112
|
+
"returnKeyType",
|
|
113
|
+
"spellCheck"
|
|
90
114
|
]);
|
|
91
115
|
var _pressableNames = /* @__PURE__ */ new Set([
|
|
92
116
|
"Pressable",
|
|
@@ -95,9 +119,26 @@ var _pressableNames = /* @__PURE__ */ new Set([
|
|
|
95
119
|
"TouchableWithoutFeedback",
|
|
96
120
|
"TouchableNativeFeedback"
|
|
97
121
|
]);
|
|
98
|
-
|
|
122
|
+
var _keyboardTypeMap = {
|
|
123
|
+
"numeric": "number",
|
|
124
|
+
"number-pad": "number",
|
|
125
|
+
"decimal-pad": "decimal",
|
|
126
|
+
"email-address": "email",
|
|
127
|
+
"phone-pad": "tel",
|
|
128
|
+
"url": "url"
|
|
129
|
+
};
|
|
130
|
+
var _resizeModeMap = {
|
|
131
|
+
"contain": "contain",
|
|
132
|
+
"cover": "cover",
|
|
133
|
+
"stretch": "fill",
|
|
134
|
+
"center": "none",
|
|
135
|
+
"repeat": "none"
|
|
136
|
+
};
|
|
137
|
+
function transformToWebProps(originalName, tag, props) {
|
|
99
138
|
const out = {};
|
|
100
139
|
const isPressable = _pressableNames.has(originalName);
|
|
140
|
+
const isTextInput = originalName === "TextInput";
|
|
141
|
+
const isImage = originalName === "Image" || originalName === "ImageBackground";
|
|
101
142
|
for (const [k, v] of Object.entries(props)) {
|
|
102
143
|
if (_rnOnlyProps.has(k)) continue;
|
|
103
144
|
if (k === "onPress") {
|
|
@@ -116,9 +157,50 @@ function transformToWebProps(originalName, props) {
|
|
|
116
157
|
if (out["data-testid"] == null) out["data-testid"] = v;
|
|
117
158
|
continue;
|
|
118
159
|
}
|
|
160
|
+
if (isTextInput) {
|
|
161
|
+
if (k === "onChangeText") {
|
|
162
|
+
if (!("onChange" in props)) out.onChange = (e) => v(e.target.value);
|
|
163
|
+
continue;
|
|
164
|
+
}
|
|
165
|
+
if (k === "secureTextEntry") {
|
|
166
|
+
if (v && !("type" in props)) out.type = "password";
|
|
167
|
+
continue;
|
|
168
|
+
}
|
|
169
|
+
if (k === "keyboardType") {
|
|
170
|
+
if (!("type" in props) && !("secureTextEntry" in props)) {
|
|
171
|
+
const mapped = _keyboardTypeMap[v];
|
|
172
|
+
if (mapped) out.type = mapped;
|
|
173
|
+
}
|
|
174
|
+
continue;
|
|
175
|
+
}
|
|
176
|
+
if (k === "editable") {
|
|
177
|
+
if (v === false) out.readOnly = true;
|
|
178
|
+
continue;
|
|
179
|
+
}
|
|
180
|
+
if (k === "maxLength") {
|
|
181
|
+
out.maxLength = v;
|
|
182
|
+
continue;
|
|
183
|
+
}
|
|
184
|
+
}
|
|
185
|
+
if (isImage) {
|
|
186
|
+
if (k === "source") {
|
|
187
|
+
if (v && typeof v === "object" && "uri" in v) {
|
|
188
|
+
out.src = v.uri;
|
|
189
|
+
if (v.headers) out["crossOrigin"] = "anonymous";
|
|
190
|
+
}
|
|
191
|
+
continue;
|
|
192
|
+
}
|
|
193
|
+
if (k === "resizeMode") {
|
|
194
|
+
const existing = out.style ?? {};
|
|
195
|
+
out.style = { ...existing, objectFit: _resizeModeMap[v] ?? "cover" };
|
|
196
|
+
continue;
|
|
197
|
+
}
|
|
198
|
+
if (k === "alt" || k === "defaultSource") continue;
|
|
199
|
+
}
|
|
119
200
|
out[k] = v;
|
|
120
201
|
}
|
|
121
202
|
if (isPressable && !out.role) out.role = "button";
|
|
203
|
+
if (isImage && tag === "img" && out.alt == null) out.alt = "";
|
|
122
204
|
return out;
|
|
123
205
|
}
|
|
124
206
|
|
package/dist/index.js
CHANGED
|
@@ -3546,7 +3546,12 @@ var _rnToHtml = {
|
|
|
3546
3546
|
KeyboardAvoidingView: "div",
|
|
3547
3547
|
ScrollView: "div",
|
|
3548
3548
|
VirtualizedList: "div",
|
|
3549
|
+
FlatList: "div",
|
|
3550
|
+
SectionList: "div",
|
|
3549
3551
|
Text: "span",
|
|
3552
|
+
TextInput: "input",
|
|
3553
|
+
Image: "img",
|
|
3554
|
+
ImageBackground: "div",
|
|
3550
3555
|
Pressable: "div",
|
|
3551
3556
|
TouchableOpacity: "div",
|
|
3552
3557
|
TouchableHighlight: "div",
|
|
@@ -3560,14 +3565,22 @@ function registerWebElement(rnComponent, htmlTag) {
|
|
|
3560
3565
|
_userMap.set(rnComponent, htmlTag);
|
|
3561
3566
|
_cache.delete(rnComponent);
|
|
3562
3567
|
}
|
|
3563
|
-
function getWebTag(type) {
|
|
3568
|
+
function getWebTag(type, props) {
|
|
3564
3569
|
if (typeof type === "string") return null;
|
|
3565
3570
|
if (type === null || typeof type !== "function" && typeof type !== "object") return null;
|
|
3566
3571
|
const obj = type;
|
|
3567
3572
|
if (_userMap.has(obj)) return _userMap.get(obj);
|
|
3568
|
-
if (_cache.has(obj)) return _cache.get(obj);
|
|
3569
3573
|
const name = obj.displayName ?? obj.name;
|
|
3570
|
-
|
|
3574
|
+
if (!name) {
|
|
3575
|
+
_cache.set(obj, null);
|
|
3576
|
+
return null;
|
|
3577
|
+
}
|
|
3578
|
+
if (name === "TextInput" && props) {
|
|
3579
|
+
const multiline = props.multiline === true || Number(props.numberOfLines) > 1;
|
|
3580
|
+
return multiline ? "textarea" : "input";
|
|
3581
|
+
}
|
|
3582
|
+
if (_cache.has(obj)) return _cache.get(obj);
|
|
3583
|
+
const tag = _rnToHtml[name] ?? null;
|
|
3571
3584
|
_cache.set(obj, tag);
|
|
3572
3585
|
return tag;
|
|
3573
3586
|
}
|
|
@@ -3587,8 +3600,19 @@ var _rnOnlyProps = /* @__PURE__ */ new Set([
|
|
|
3587
3600
|
"needsOffscreenAlphaCompositing",
|
|
3588
3601
|
"renderToHardwareTextureAndroid",
|
|
3589
3602
|
"shouldRasterizeIOS",
|
|
3590
|
-
"pointerEvents"
|
|
3603
|
+
"pointerEvents",
|
|
3591
3604
|
// RN and HTML values differ
|
|
3605
|
+
"multiline",
|
|
3606
|
+
"numberOfLines",
|
|
3607
|
+
// handled separately
|
|
3608
|
+
"resizeMode",
|
|
3609
|
+
// handled separately
|
|
3610
|
+
"blurOnSubmit",
|
|
3611
|
+
"clearButtonMode",
|
|
3612
|
+
"clearTextOnFocus",
|
|
3613
|
+
"enablesReturnKeyAutomatically",
|
|
3614
|
+
"returnKeyType",
|
|
3615
|
+
"spellCheck"
|
|
3592
3616
|
]);
|
|
3593
3617
|
var _pressableNames = /* @__PURE__ */ new Set([
|
|
3594
3618
|
"Pressable",
|
|
@@ -3597,9 +3621,26 @@ var _pressableNames = /* @__PURE__ */ new Set([
|
|
|
3597
3621
|
"TouchableWithoutFeedback",
|
|
3598
3622
|
"TouchableNativeFeedback"
|
|
3599
3623
|
]);
|
|
3600
|
-
|
|
3624
|
+
var _keyboardTypeMap = {
|
|
3625
|
+
"numeric": "number",
|
|
3626
|
+
"number-pad": "number",
|
|
3627
|
+
"decimal-pad": "decimal",
|
|
3628
|
+
"email-address": "email",
|
|
3629
|
+
"phone-pad": "tel",
|
|
3630
|
+
"url": "url"
|
|
3631
|
+
};
|
|
3632
|
+
var _resizeModeMap = {
|
|
3633
|
+
"contain": "contain",
|
|
3634
|
+
"cover": "cover",
|
|
3635
|
+
"stretch": "fill",
|
|
3636
|
+
"center": "none",
|
|
3637
|
+
"repeat": "none"
|
|
3638
|
+
};
|
|
3639
|
+
function transformToWebProps(originalName, tag, props) {
|
|
3601
3640
|
const out = {};
|
|
3602
3641
|
const isPressable = _pressableNames.has(originalName);
|
|
3642
|
+
const isTextInput = originalName === "TextInput";
|
|
3643
|
+
const isImage = originalName === "Image" || originalName === "ImageBackground";
|
|
3603
3644
|
for (const [k, v] of Object.entries(props)) {
|
|
3604
3645
|
if (_rnOnlyProps.has(k)) continue;
|
|
3605
3646
|
if (k === "onPress") {
|
|
@@ -3618,9 +3659,50 @@ function transformToWebProps(originalName, props) {
|
|
|
3618
3659
|
if (out["data-testid"] == null) out["data-testid"] = v;
|
|
3619
3660
|
continue;
|
|
3620
3661
|
}
|
|
3662
|
+
if (isTextInput) {
|
|
3663
|
+
if (k === "onChangeText") {
|
|
3664
|
+
if (!("onChange" in props)) out.onChange = (e) => v(e.target.value);
|
|
3665
|
+
continue;
|
|
3666
|
+
}
|
|
3667
|
+
if (k === "secureTextEntry") {
|
|
3668
|
+
if (v && !("type" in props)) out.type = "password";
|
|
3669
|
+
continue;
|
|
3670
|
+
}
|
|
3671
|
+
if (k === "keyboardType") {
|
|
3672
|
+
if (!("type" in props) && !("secureTextEntry" in props)) {
|
|
3673
|
+
const mapped = _keyboardTypeMap[v];
|
|
3674
|
+
if (mapped) out.type = mapped;
|
|
3675
|
+
}
|
|
3676
|
+
continue;
|
|
3677
|
+
}
|
|
3678
|
+
if (k === "editable") {
|
|
3679
|
+
if (v === false) out.readOnly = true;
|
|
3680
|
+
continue;
|
|
3681
|
+
}
|
|
3682
|
+
if (k === "maxLength") {
|
|
3683
|
+
out.maxLength = v;
|
|
3684
|
+
continue;
|
|
3685
|
+
}
|
|
3686
|
+
}
|
|
3687
|
+
if (isImage) {
|
|
3688
|
+
if (k === "source") {
|
|
3689
|
+
if (v && typeof v === "object" && "uri" in v) {
|
|
3690
|
+
out.src = v.uri;
|
|
3691
|
+
if (v.headers) out["crossOrigin"] = "anonymous";
|
|
3692
|
+
}
|
|
3693
|
+
continue;
|
|
3694
|
+
}
|
|
3695
|
+
if (k === "resizeMode") {
|
|
3696
|
+
const existing = out.style ?? {};
|
|
3697
|
+
out.style = { ...existing, objectFit: _resizeModeMap[v] ?? "cover" };
|
|
3698
|
+
continue;
|
|
3699
|
+
}
|
|
3700
|
+
if (k === "alt" || k === "defaultSource") continue;
|
|
3701
|
+
}
|
|
3621
3702
|
out[k] = v;
|
|
3622
3703
|
}
|
|
3623
3704
|
if (isPressable && !out.role) out.role = "button";
|
|
3705
|
+
if (isImage && tag === "img" && out.alt == null) out.alt = "";
|
|
3624
3706
|
return out;
|
|
3625
3707
|
}
|
|
3626
3708
|
|
|
@@ -3697,10 +3779,10 @@ function styled(Component, baseClasses = "") {
|
|
|
3697
3779
|
);
|
|
3698
3780
|
const extraStyle = Array.isArray(styleProp) ? Object.assign({}, ...styleProp) : styleProp;
|
|
3699
3781
|
const finalStyle = isWeb ? extraStyle ?? void 0 : extraStyle ? { ...computedStyle, ...extraStyle } : computedStyle;
|
|
3700
|
-
const webTag = isWeb ? getWebTag(Component) : null;
|
|
3782
|
+
const webTag = isWeb ? getWebTag(Component, rest) : null;
|
|
3701
3783
|
const effectiveComponent = webTag ?? Component;
|
|
3702
3784
|
const componentName2 = Component.displayName ?? Component.name ?? "";
|
|
3703
|
-
const effectiveRest = webTag && componentName2 ? transformToWebProps(componentName2, rest) : rest;
|
|
3785
|
+
const effectiveRest = webTag && componentName2 ? transformToWebProps(componentName2, webTag, rest) : rest;
|
|
3704
3786
|
return import_react6.default.createElement(effectiveComponent, {
|
|
3705
3787
|
ref,
|
|
3706
3788
|
...effectiveRest,
|
package/dist/index.mjs
CHANGED
|
@@ -11,7 +11,7 @@ import {
|
|
|
11
11
|
useConditionalWidth,
|
|
12
12
|
useGlobalDarkMode,
|
|
13
13
|
useGlobalWidth
|
|
14
|
-
} from "./chunk-
|
|
14
|
+
} from "./chunk-7EUNJFX7.mjs";
|
|
15
15
|
import {
|
|
16
16
|
__require,
|
|
17
17
|
buildConfig,
|
|
@@ -482,10 +482,10 @@ function styled(Component, baseClasses = "") {
|
|
|
482
482
|
);
|
|
483
483
|
const extraStyle = Array.isArray(styleProp) ? Object.assign({}, ...styleProp) : styleProp;
|
|
484
484
|
const finalStyle = isWeb ? extraStyle ?? void 0 : extraStyle ? { ...computedStyle, ...extraStyle } : computedStyle;
|
|
485
|
-
const webTag = isWeb ? getWebTag(Component) : null;
|
|
485
|
+
const webTag = isWeb ? getWebTag(Component, rest) : null;
|
|
486
486
|
const effectiveComponent = webTag ?? Component;
|
|
487
487
|
const componentName2 = Component.displayName ?? Component.name ?? "";
|
|
488
|
-
const effectiveRest = webTag && componentName2 ? transformToWebProps(componentName2, rest) : rest;
|
|
488
|
+
const effectiveRest = webTag && componentName2 ? transformToWebProps(componentName2, webTag, rest) : rest;
|
|
489
489
|
return React3.createElement(effectiveComponent, {
|
|
490
490
|
ref,
|
|
491
491
|
...effectiveRest,
|
package/dist/jsx-dev-runtime.js
CHANGED
|
@@ -3266,7 +3266,12 @@ var _rnToHtml = {
|
|
|
3266
3266
|
KeyboardAvoidingView: "div",
|
|
3267
3267
|
ScrollView: "div",
|
|
3268
3268
|
VirtualizedList: "div",
|
|
3269
|
+
FlatList: "div",
|
|
3270
|
+
SectionList: "div",
|
|
3269
3271
|
Text: "span",
|
|
3272
|
+
TextInput: "input",
|
|
3273
|
+
Image: "img",
|
|
3274
|
+
ImageBackground: "div",
|
|
3270
3275
|
Pressable: "div",
|
|
3271
3276
|
TouchableOpacity: "div",
|
|
3272
3277
|
TouchableHighlight: "div",
|
|
@@ -3275,14 +3280,22 @@ var _rnToHtml = {
|
|
|
3275
3280
|
};
|
|
3276
3281
|
var _userMap = /* @__PURE__ */ new Map();
|
|
3277
3282
|
var _cache = /* @__PURE__ */ new WeakMap();
|
|
3278
|
-
function getWebTag(type) {
|
|
3283
|
+
function getWebTag(type, props) {
|
|
3279
3284
|
if (typeof type === "string") return null;
|
|
3280
3285
|
if (type === null || typeof type !== "function" && typeof type !== "object") return null;
|
|
3281
3286
|
const obj = type;
|
|
3282
3287
|
if (_userMap.has(obj)) return _userMap.get(obj);
|
|
3283
|
-
if (_cache.has(obj)) return _cache.get(obj);
|
|
3284
3288
|
const name = obj.displayName ?? obj.name;
|
|
3285
|
-
|
|
3289
|
+
if (!name) {
|
|
3290
|
+
_cache.set(obj, null);
|
|
3291
|
+
return null;
|
|
3292
|
+
}
|
|
3293
|
+
if (name === "TextInput" && props) {
|
|
3294
|
+
const multiline = props.multiline === true || Number(props.numberOfLines) > 1;
|
|
3295
|
+
return multiline ? "textarea" : "input";
|
|
3296
|
+
}
|
|
3297
|
+
if (_cache.has(obj)) return _cache.get(obj);
|
|
3298
|
+
const tag = _rnToHtml[name] ?? null;
|
|
3286
3299
|
_cache.set(obj, tag);
|
|
3287
3300
|
return tag;
|
|
3288
3301
|
}
|
|
@@ -3302,8 +3315,19 @@ var _rnOnlyProps = /* @__PURE__ */ new Set([
|
|
|
3302
3315
|
"needsOffscreenAlphaCompositing",
|
|
3303
3316
|
"renderToHardwareTextureAndroid",
|
|
3304
3317
|
"shouldRasterizeIOS",
|
|
3305
|
-
"pointerEvents"
|
|
3318
|
+
"pointerEvents",
|
|
3306
3319
|
// RN and HTML values differ
|
|
3320
|
+
"multiline",
|
|
3321
|
+
"numberOfLines",
|
|
3322
|
+
// handled separately
|
|
3323
|
+
"resizeMode",
|
|
3324
|
+
// handled separately
|
|
3325
|
+
"blurOnSubmit",
|
|
3326
|
+
"clearButtonMode",
|
|
3327
|
+
"clearTextOnFocus",
|
|
3328
|
+
"enablesReturnKeyAutomatically",
|
|
3329
|
+
"returnKeyType",
|
|
3330
|
+
"spellCheck"
|
|
3307
3331
|
]);
|
|
3308
3332
|
var _pressableNames = /* @__PURE__ */ new Set([
|
|
3309
3333
|
"Pressable",
|
|
@@ -3312,9 +3336,26 @@ var _pressableNames = /* @__PURE__ */ new Set([
|
|
|
3312
3336
|
"TouchableWithoutFeedback",
|
|
3313
3337
|
"TouchableNativeFeedback"
|
|
3314
3338
|
]);
|
|
3315
|
-
|
|
3339
|
+
var _keyboardTypeMap = {
|
|
3340
|
+
"numeric": "number",
|
|
3341
|
+
"number-pad": "number",
|
|
3342
|
+
"decimal-pad": "decimal",
|
|
3343
|
+
"email-address": "email",
|
|
3344
|
+
"phone-pad": "tel",
|
|
3345
|
+
"url": "url"
|
|
3346
|
+
};
|
|
3347
|
+
var _resizeModeMap = {
|
|
3348
|
+
"contain": "contain",
|
|
3349
|
+
"cover": "cover",
|
|
3350
|
+
"stretch": "fill",
|
|
3351
|
+
"center": "none",
|
|
3352
|
+
"repeat": "none"
|
|
3353
|
+
};
|
|
3354
|
+
function transformToWebProps(originalName, tag, props) {
|
|
3316
3355
|
const out = {};
|
|
3317
3356
|
const isPressable = _pressableNames.has(originalName);
|
|
3357
|
+
const isTextInput = originalName === "TextInput";
|
|
3358
|
+
const isImage = originalName === "Image" || originalName === "ImageBackground";
|
|
3318
3359
|
for (const [k, v] of Object.entries(props)) {
|
|
3319
3360
|
if (_rnOnlyProps.has(k)) continue;
|
|
3320
3361
|
if (k === "onPress") {
|
|
@@ -3333,9 +3374,50 @@ function transformToWebProps(originalName, props) {
|
|
|
3333
3374
|
if (out["data-testid"] == null) out["data-testid"] = v;
|
|
3334
3375
|
continue;
|
|
3335
3376
|
}
|
|
3377
|
+
if (isTextInput) {
|
|
3378
|
+
if (k === "onChangeText") {
|
|
3379
|
+
if (!("onChange" in props)) out.onChange = (e) => v(e.target.value);
|
|
3380
|
+
continue;
|
|
3381
|
+
}
|
|
3382
|
+
if (k === "secureTextEntry") {
|
|
3383
|
+
if (v && !("type" in props)) out.type = "password";
|
|
3384
|
+
continue;
|
|
3385
|
+
}
|
|
3386
|
+
if (k === "keyboardType") {
|
|
3387
|
+
if (!("type" in props) && !("secureTextEntry" in props)) {
|
|
3388
|
+
const mapped = _keyboardTypeMap[v];
|
|
3389
|
+
if (mapped) out.type = mapped;
|
|
3390
|
+
}
|
|
3391
|
+
continue;
|
|
3392
|
+
}
|
|
3393
|
+
if (k === "editable") {
|
|
3394
|
+
if (v === false) out.readOnly = true;
|
|
3395
|
+
continue;
|
|
3396
|
+
}
|
|
3397
|
+
if (k === "maxLength") {
|
|
3398
|
+
out.maxLength = v;
|
|
3399
|
+
continue;
|
|
3400
|
+
}
|
|
3401
|
+
}
|
|
3402
|
+
if (isImage) {
|
|
3403
|
+
if (k === "source") {
|
|
3404
|
+
if (v && typeof v === "object" && "uri" in v) {
|
|
3405
|
+
out.src = v.uri;
|
|
3406
|
+
if (v.headers) out["crossOrigin"] = "anonymous";
|
|
3407
|
+
}
|
|
3408
|
+
continue;
|
|
3409
|
+
}
|
|
3410
|
+
if (k === "resizeMode") {
|
|
3411
|
+
const existing = out.style ?? {};
|
|
3412
|
+
out.style = { ...existing, objectFit: _resizeModeMap[v] ?? "cover" };
|
|
3413
|
+
continue;
|
|
3414
|
+
}
|
|
3415
|
+
if (k === "alt" || k === "defaultSource") continue;
|
|
3416
|
+
}
|
|
3336
3417
|
out[k] = v;
|
|
3337
3418
|
}
|
|
3338
3419
|
if (isPressable && !out.role) out.role = "button";
|
|
3420
|
+
if (isImage && tag === "img" && out.alt == null) out.alt = "";
|
|
3339
3421
|
return out;
|
|
3340
3422
|
}
|
|
3341
3423
|
|
|
@@ -3419,11 +3501,11 @@ function stripWebOnlyInlineProps(s) {
|
|
|
3419
3501
|
}
|
|
3420
3502
|
function processElement(type, rawProps, key, isStaticChildren) {
|
|
3421
3503
|
if (typeof type === "symbol") return makeElement(isStaticChildren, type, rawProps ?? {}, key);
|
|
3422
|
-
const webTag = isWeb ? getWebTag(type) : null;
|
|
3504
|
+
const webTag = isWeb ? getWebTag(type, rawProps ?? void 0) : null;
|
|
3423
3505
|
const effectiveType = webTag ?? type;
|
|
3424
3506
|
const originalName = webTag ? type?.displayName ?? type?.name : void 0;
|
|
3425
3507
|
if (!rawProps) return (0, import_jsx_runtime.jsx)(effectiveType, null, key);
|
|
3426
|
-
const workingProps = webTag && originalName ? transformToWebProps(originalName, rawProps) : rawProps;
|
|
3508
|
+
const workingProps = webTag && originalName ? transformToWebProps(originalName, webTag, rawProps) : rawProps;
|
|
3427
3509
|
const { className, kb: kbProp, __kbachStyles, __kbachClasses } = workingProps;
|
|
3428
3510
|
const classStr = className ?? kbProp ?? __kbachClasses;
|
|
3429
3511
|
if (!isNative && isRuntimeCSSDisabled() && classStr && !__kbachStyles) {
|
package/dist/jsx-dev-runtime.mjs
CHANGED
package/dist/jsx-runtime.js
CHANGED
|
@@ -3267,7 +3267,12 @@ var _rnToHtml = {
|
|
|
3267
3267
|
KeyboardAvoidingView: "div",
|
|
3268
3268
|
ScrollView: "div",
|
|
3269
3269
|
VirtualizedList: "div",
|
|
3270
|
+
FlatList: "div",
|
|
3271
|
+
SectionList: "div",
|
|
3270
3272
|
Text: "span",
|
|
3273
|
+
TextInput: "input",
|
|
3274
|
+
Image: "img",
|
|
3275
|
+
ImageBackground: "div",
|
|
3271
3276
|
Pressable: "div",
|
|
3272
3277
|
TouchableOpacity: "div",
|
|
3273
3278
|
TouchableHighlight: "div",
|
|
@@ -3281,14 +3286,22 @@ function registerWebElement(rnComponent, htmlTag) {
|
|
|
3281
3286
|
_userMap.set(rnComponent, htmlTag);
|
|
3282
3287
|
_cache.delete(rnComponent);
|
|
3283
3288
|
}
|
|
3284
|
-
function getWebTag(type) {
|
|
3289
|
+
function getWebTag(type, props) {
|
|
3285
3290
|
if (typeof type === "string") return null;
|
|
3286
3291
|
if (type === null || typeof type !== "function" && typeof type !== "object") return null;
|
|
3287
3292
|
const obj = type;
|
|
3288
3293
|
if (_userMap.has(obj)) return _userMap.get(obj);
|
|
3289
|
-
if (_cache.has(obj)) return _cache.get(obj);
|
|
3290
3294
|
const name = obj.displayName ?? obj.name;
|
|
3291
|
-
|
|
3295
|
+
if (!name) {
|
|
3296
|
+
_cache.set(obj, null);
|
|
3297
|
+
return null;
|
|
3298
|
+
}
|
|
3299
|
+
if (name === "TextInput" && props) {
|
|
3300
|
+
const multiline = props.multiline === true || Number(props.numberOfLines) > 1;
|
|
3301
|
+
return multiline ? "textarea" : "input";
|
|
3302
|
+
}
|
|
3303
|
+
if (_cache.has(obj)) return _cache.get(obj);
|
|
3304
|
+
const tag = _rnToHtml[name] ?? null;
|
|
3292
3305
|
_cache.set(obj, tag);
|
|
3293
3306
|
return tag;
|
|
3294
3307
|
}
|
|
@@ -3308,8 +3321,19 @@ var _rnOnlyProps = /* @__PURE__ */ new Set([
|
|
|
3308
3321
|
"needsOffscreenAlphaCompositing",
|
|
3309
3322
|
"renderToHardwareTextureAndroid",
|
|
3310
3323
|
"shouldRasterizeIOS",
|
|
3311
|
-
"pointerEvents"
|
|
3324
|
+
"pointerEvents",
|
|
3312
3325
|
// RN and HTML values differ
|
|
3326
|
+
"multiline",
|
|
3327
|
+
"numberOfLines",
|
|
3328
|
+
// handled separately
|
|
3329
|
+
"resizeMode",
|
|
3330
|
+
// handled separately
|
|
3331
|
+
"blurOnSubmit",
|
|
3332
|
+
"clearButtonMode",
|
|
3333
|
+
"clearTextOnFocus",
|
|
3334
|
+
"enablesReturnKeyAutomatically",
|
|
3335
|
+
"returnKeyType",
|
|
3336
|
+
"spellCheck"
|
|
3313
3337
|
]);
|
|
3314
3338
|
var _pressableNames = /* @__PURE__ */ new Set([
|
|
3315
3339
|
"Pressable",
|
|
@@ -3318,9 +3342,26 @@ var _pressableNames = /* @__PURE__ */ new Set([
|
|
|
3318
3342
|
"TouchableWithoutFeedback",
|
|
3319
3343
|
"TouchableNativeFeedback"
|
|
3320
3344
|
]);
|
|
3321
|
-
|
|
3345
|
+
var _keyboardTypeMap = {
|
|
3346
|
+
"numeric": "number",
|
|
3347
|
+
"number-pad": "number",
|
|
3348
|
+
"decimal-pad": "decimal",
|
|
3349
|
+
"email-address": "email",
|
|
3350
|
+
"phone-pad": "tel",
|
|
3351
|
+
"url": "url"
|
|
3352
|
+
};
|
|
3353
|
+
var _resizeModeMap = {
|
|
3354
|
+
"contain": "contain",
|
|
3355
|
+
"cover": "cover",
|
|
3356
|
+
"stretch": "fill",
|
|
3357
|
+
"center": "none",
|
|
3358
|
+
"repeat": "none"
|
|
3359
|
+
};
|
|
3360
|
+
function transformToWebProps(originalName, tag, props) {
|
|
3322
3361
|
const out = {};
|
|
3323
3362
|
const isPressable = _pressableNames.has(originalName);
|
|
3363
|
+
const isTextInput = originalName === "TextInput";
|
|
3364
|
+
const isImage = originalName === "Image" || originalName === "ImageBackground";
|
|
3324
3365
|
for (const [k, v] of Object.entries(props)) {
|
|
3325
3366
|
if (_rnOnlyProps.has(k)) continue;
|
|
3326
3367
|
if (k === "onPress") {
|
|
@@ -3339,9 +3380,50 @@ function transformToWebProps(originalName, props) {
|
|
|
3339
3380
|
if (out["data-testid"] == null) out["data-testid"] = v;
|
|
3340
3381
|
continue;
|
|
3341
3382
|
}
|
|
3383
|
+
if (isTextInput) {
|
|
3384
|
+
if (k === "onChangeText") {
|
|
3385
|
+
if (!("onChange" in props)) out.onChange = (e) => v(e.target.value);
|
|
3386
|
+
continue;
|
|
3387
|
+
}
|
|
3388
|
+
if (k === "secureTextEntry") {
|
|
3389
|
+
if (v && !("type" in props)) out.type = "password";
|
|
3390
|
+
continue;
|
|
3391
|
+
}
|
|
3392
|
+
if (k === "keyboardType") {
|
|
3393
|
+
if (!("type" in props) && !("secureTextEntry" in props)) {
|
|
3394
|
+
const mapped = _keyboardTypeMap[v];
|
|
3395
|
+
if (mapped) out.type = mapped;
|
|
3396
|
+
}
|
|
3397
|
+
continue;
|
|
3398
|
+
}
|
|
3399
|
+
if (k === "editable") {
|
|
3400
|
+
if (v === false) out.readOnly = true;
|
|
3401
|
+
continue;
|
|
3402
|
+
}
|
|
3403
|
+
if (k === "maxLength") {
|
|
3404
|
+
out.maxLength = v;
|
|
3405
|
+
continue;
|
|
3406
|
+
}
|
|
3407
|
+
}
|
|
3408
|
+
if (isImage) {
|
|
3409
|
+
if (k === "source") {
|
|
3410
|
+
if (v && typeof v === "object" && "uri" in v) {
|
|
3411
|
+
out.src = v.uri;
|
|
3412
|
+
if (v.headers) out["crossOrigin"] = "anonymous";
|
|
3413
|
+
}
|
|
3414
|
+
continue;
|
|
3415
|
+
}
|
|
3416
|
+
if (k === "resizeMode") {
|
|
3417
|
+
const existing = out.style ?? {};
|
|
3418
|
+
out.style = { ...existing, objectFit: _resizeModeMap[v] ?? "cover" };
|
|
3419
|
+
continue;
|
|
3420
|
+
}
|
|
3421
|
+
if (k === "alt" || k === "defaultSource") continue;
|
|
3422
|
+
}
|
|
3342
3423
|
out[k] = v;
|
|
3343
3424
|
}
|
|
3344
3425
|
if (isPressable && !out.role) out.role = "button";
|
|
3426
|
+
if (isImage && tag === "img" && out.alt == null) out.alt = "";
|
|
3345
3427
|
return out;
|
|
3346
3428
|
}
|
|
3347
3429
|
|
|
@@ -3428,11 +3510,11 @@ function stripWebOnlyInlineProps(s) {
|
|
|
3428
3510
|
}
|
|
3429
3511
|
function processElement(type, rawProps, key, isStaticChildren) {
|
|
3430
3512
|
if (typeof type === "symbol") return makeElement(isStaticChildren, type, rawProps ?? {}, key);
|
|
3431
|
-
const webTag = isWeb ? getWebTag(type) : null;
|
|
3513
|
+
const webTag = isWeb ? getWebTag(type, rawProps ?? void 0) : null;
|
|
3432
3514
|
const effectiveType = webTag ?? type;
|
|
3433
3515
|
const originalName = webTag ? type?.displayName ?? type?.name : void 0;
|
|
3434
3516
|
if (!rawProps) return (0, import_jsx_runtime.jsx)(effectiveType, null, key);
|
|
3435
|
-
const workingProps = webTag && originalName ? transformToWebProps(originalName, rawProps) : rawProps;
|
|
3517
|
+
const workingProps = webTag && originalName ? transformToWebProps(originalName, webTag, rawProps) : rawProps;
|
|
3436
3518
|
const { className, kb: kbProp, __kbachStyles, __kbachClasses } = workingProps;
|
|
3437
3519
|
const classStr = className ?? kbProp ?? __kbachClasses;
|
|
3438
3520
|
if (!isNative && isRuntimeCSSDisabled() && classStr && !__kbachStyles) {
|
package/dist/jsx-runtime.mjs
CHANGED
|
@@ -3,10 +3,10 @@ import {
|
|
|
3
3
|
_invalidateDefaultFontCache,
|
|
4
4
|
jsx,
|
|
5
5
|
jsxs
|
|
6
|
-
} from "./chunk-
|
|
6
|
+
} from "./chunk-6PRTRINF.mjs";
|
|
7
7
|
import {
|
|
8
8
|
registerWebElement
|
|
9
|
-
} from "./chunk-
|
|
9
|
+
} from "./chunk-7EUNJFX7.mjs";
|
|
10
10
|
import "./chunk-JBV2R655.mjs";
|
|
11
11
|
export {
|
|
12
12
|
Fragment,
|