Skip to content

Commit 84a23eb

Browse files
Karthik-B-06Karthik-B-06
authored
Merge pull request #157 from adaptui/dev
Package version updates and Web related fixes
2 parents c128f9c + f430579 commit 84a23eb

File tree

16 files changed

+390
-342
lines changed

16 files changed

+390
-342
lines changed

‎example/.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
11
.vercel
2+
ios
3+
android

‎example/package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,26 +11,26 @@
1111
"start": "expo start -c"
1212
},
1313
"dependencies": {
14-
"@expo/webpack-config": "^18.1.2",
14+
"@expo/webpack-config": "^19.0.0",
1515
"@react-native-masked-view/masked-view": "0.2.9",
1616
"@react-navigation/drawer": "^6.6.2",
1717
"@react-navigation/native": "^6.1.6",
1818
"@react-navigation/stack": "^6.3.16",
1919
"expo": "^49.0.8",
2020
"expo-application": "~5.3.0",
2121
"expo-haptics": "~12.4.0",
22-
"expo-screen-orientation": "~6.0.5",
22+
"expo-screen-orientation": "~6.0.6",
2323
"expo-splash-screen": "~0.20.5",
2424
"expo-status-bar": "~1.6.0",
2525
"react": "18.2.0",
2626
"react-dom": "18.2.0",
27-
"react-native": "0.72.4",
27+
"react-native": "0.72.10",
2828
"react-native-gesture-handler": "~2.12.0",
2929
"react-native-popper": "0.3.2",
3030
"react-native-reanimated": "~3.3.0",
3131
"react-native-safe-area-context": "4.6.3",
3232
"react-native-screens": "~3.22.0",
33-
"react-native-svg": "13.9.0",
33+
"react-native-svg": "15.1.0",
3434
"react-native-web": "~0.19.6",
3535
"setimmediate": "^1.0.5",
3636
"sharp-cli": "^4.1.0"

‎example/yarn.lock‎

Lines changed: 221 additions & 296 deletions
Large diffs are not rendered by default.

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@
7979
"@babel/plugin-proposal-export-namespace-from": "^7.18.9",
8080
"@chakra-ui/hooks": "2.2.0",
8181
"@gorhom/bottom-sheet": "5.0.0-alpha.3",
82-
"@react-aria/focus": "^3.14.0",
82+
"@react-aria/focus": "^3.16.2",
8383
"@react-aria/visually-hidden": "^3.8.3",
8484
"@react-stately/checkbox": "^3.4.4",
8585
"@react-stately/toggle": "^3.6.1",
@@ -120,7 +120,7 @@
120120
"react-native-builder-bob": "0.21.3",
121121
"react-native-gesture-handler": "^2.12.0",
122122
"react-native-reanimated": "3.3.0",
123-
"react-native-svg": "13.9.0",
123+
"react-native-svg": "15.1.0",
124124
"release-it": "15.10.3",
125125
"sort-package-json": "2.5.1",
126126
"typescript": "^4.8.4"

‎src/components/button/Button.tsx‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,9 @@ import {
1616
generateBoxShadow,
1717
styleAdapter,
1818
useHaptic,
19-
useOnFocus,
2019
useOnHover,
2120
useScaleAnimation,
21+
useWebFocusRing,
2222
} from "../../utils";
2323
import { createIcon } from "../create-icon";
2424
import { Icon } from "../icon";
@@ -129,7 +129,7 @@ const RNButton: React.FC<Partial<ButtonProps>> = forwardRef<
129129
const { handlers, animatedStyle } = useScaleAnimation();
130130
const hapticMedium = useHaptic("medium");
131131
const { onHoverIn, onHoverOut, hovered } = useOnHover();
132-
const { onFocus, onBlur, focused } = useOnFocus();
132+
const { focusProps, isFocusVisible, isFocused } = useWebFocusRing();
133133

134134
const iconAspectRatio = 1;
135135

@@ -285,6 +285,12 @@ const RNButton: React.FC<Partial<ButtonProps>> = forwardRef<
285285
return (
286286
<AnimatedBox style={animatedStyle}>
287287
<Touchable
288+
/**
289+
* * The TypeScript error arises due to an inconsistency between the expected ViewStyle type
290+
* * and the specific styling provided for the web platform,
291+
* * which includes outline and boxShadow properties not defined in the ViewStyle type.
292+
*/
293+
// @ts-ignore
288294
style={(touchState: PressableStateCallbackType) => {
289295
return [
290296
ts(
@@ -307,10 +313,10 @@ const RNButton: React.FC<Partial<ButtonProps>> = forwardRef<
307313
: "",
308314
),
309315
),
310-
focused.value
316+
Platform.OS === "web" ? buttonTheme.web : {},
317+
isFocusVisible && isFocused
311318
? Platform.select({
312319
web: {
313-
outline: 0,
314320
boxShadow: `${generateBoxShadow(
315321
buttonTheme.themeColor[themeColor]?.[variant]?.container
316322
?.focus?.offset,
@@ -334,8 +340,7 @@ const RNButton: React.FC<Partial<ButtonProps>> = forwardRef<
334340
// Web Callbacks
335341
onHoverIn={onHoverIn}
336342
onHoverOut={onHoverOut}
337-
onFocus={onFocus}
338-
onBlur={onBlur}
343+
{...focusProps}
339344
// Web Callbacks
340345
// A11y Props
341346
accessible

‎src/components/checkbox/Checkbox.tsx‎

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,9 @@ import {
2323
generateBoxShadow,
2424
styleAdapter,
2525
useHaptic,
26-
useOnFocus,
2726
useOnHover,
2827
useScaleAnimation,
28+
useWebFocusRing,
2929
} from "../../utils";
3030
import { mergeRefs } from "../../utils/mergeRefs";
3131
import { createIcon } from "../create-icon";
@@ -132,7 +132,7 @@ const RNCheckbox: React.FC<Partial<CheckboxProps>> = forwardRef<
132132
} = props;
133133

134134
const { onHoverIn, onHoverOut, hovered } = useOnHover();
135-
const { onFocus, onBlur, focused } = useOnFocus();
135+
const { focusProps, isFocusVisible, isFocused } = useWebFocusRing();
136136
const { handlers, animatedStyle } = useScaleAnimation();
137137
const hapticSelection = useHaptic();
138138

@@ -264,6 +264,12 @@ const RNCheckbox: React.FC<Partial<CheckboxProps>> = forwardRef<
264264
),
265265
),
266266
// - Web only - Checkbox toggle on Spacebar Press
267+
/**
268+
* * The TypeScript error arises due to an inconsistency between the expected ViewStyle type
269+
* * and the specific styling provided for the web platform,
270+
* * which includes outline and boxShadow properties not defined in the ViewStyle type.
271+
*/
272+
// @ts-ignore
267273
isFocussed && !hasOnlyLabel
268274
? Platform.select({
269275
web: {
@@ -357,8 +363,6 @@ const RNCheckbox: React.FC<Partial<CheckboxProps>> = forwardRef<
357363
// Web Callbacks
358364
onHoverIn={onHoverIn}
359365
onHoverOut={onHoverOut}
360-
onFocus={onFocus}
361-
onBlur={onBlur}
362366
// Web Callbacks
363367
// A11y Props
364368
accessibilityLabel={accessibilityLabel}
@@ -369,6 +373,12 @@ const RNCheckbox: React.FC<Partial<CheckboxProps>> = forwardRef<
369373
accessibilityValue={{ text: props?.value }}
370374
onAccessibilityTap={handleChange}
371375
// A11y Props
376+
/**
377+
* * The TypeScript error arises due to an inconsistency between the expected ViewStyle type
378+
* * and the specific styling provided for the web platform,
379+
* * which includes outline and boxShadow properties not defined in the ViewStyle type.
380+
*/
381+
// @ts-ignore
372382
style={(touchState: PressableStateCallbackType) => [
373383
ts(
374384
cx(
@@ -388,7 +398,8 @@ const RNCheckbox: React.FC<Partial<CheckboxProps>> = forwardRef<
388398
: "",
389399
),
390400
),
391-
focused.value
401+
Platform.OS === "web" ? checkboxTheme.web : {},
402+
isFocusVisible && isFocused
392403
? Platform.select({
393404
web: {
394405
outline: 0,
@@ -429,12 +440,13 @@ const RNCheckbox: React.FC<Partial<CheckboxProps>> = forwardRef<
429440
})}
430441
disabled={isDisabled}
431442
{...(description ? {} : handlers)}
443+
{...focusProps}
432444
>
433445
{(touchState: PressableStateCallbackType) =>
434446
children({
435447
pressed: touchState.pressed,
436448
isHovered: !!hovered.value,
437-
isFocussed: !!focused.value,
449+
isFocussed: !!(isFocusVisible && isFocused),
438450
})
439451
}
440452
</Touchable>

‎src/components/radio/Radio.tsx‎

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,9 @@ import {
1515
generateBoxShadow,
1616
styleAdapter,
1717
useHaptic,
18-
useOnFocus,
1918
useOnHover,
2019
useScaleAnimation,
20+
useWebFocusRing,
2121
} from "../../utils";
2222
import { mergeRefs } from "../../utils/mergeRefs";
2323

@@ -86,7 +86,7 @@ const RNRadio: React.FC<Partial<RadioProps>> = forwardRef<
8686
]) as unknown as React.MutableRefObject<null>;
8787

8888
const { onHoverIn, onHoverOut, hovered } = useOnHover();
89-
const { onFocus, onBlur, focused } = useOnFocus();
89+
const { focusProps, isFocusVisible, isFocused } = useWebFocusRing();
9090
const hapticSelection = useHaptic();
9191
const { handlers, animatedStyle } = useScaleAnimation();
9292
const state = useRadioGroupContext();
@@ -173,6 +173,12 @@ const RNRadio: React.FC<Partial<RadioProps>> = forwardRef<
173173
: "",
174174
),
175175
),
176+
/**
177+
* * The TypeScript error arises due to an inconsistency between the expected ViewStyle type
178+
* * and the specific styling provided for the web platform,
179+
* * which includes outline and boxShadow properties not defined in the ViewStyle type.
180+
*/
181+
// @ts-ignore
176182
isFocussed && !hasOnlyLabel
177183
? Platform.select({
178184
web: {
@@ -272,9 +278,13 @@ const RNRadio: React.FC<Partial<RadioProps>> = forwardRef<
272278
// Web Callbacks
273279
onHoverIn={onHoverIn}
274280
onHoverOut={onHoverOut}
275-
onFocus={onFocus}
276-
onBlur={onBlur}
277281
// Web Callbacks
282+
/**
283+
* * The TypeScript error arises due to an inconsistency between the expected ViewStyle type
284+
* * and the specific styling provided for the web platform,
285+
* * which includes outline and boxShadow properties not defined in the ViewStyle type.
286+
*/
287+
// @ts-ignore
278288
style={(touchState: PressableStateCallbackType) => [
279289
ts([
280290
cx(
@@ -292,10 +302,10 @@ const RNRadio: React.FC<Partial<RadioProps>> = forwardRef<
292302
: "",
293303
),
294304
]),
295-
focused.value
305+
Platform.OS === "web" ? radioTheme.web : {},
306+
isFocused && isFocusVisible
296307
? Platform.select({
297308
web: {
298-
outline: 0,
299309
boxShadow: hasOnlyLabel
300310
? `${generateBoxShadow(
301311
radioTheme.themeColor[themeColor]?.label?.focus?.offset,
@@ -342,12 +352,13 @@ const RNRadio: React.FC<Partial<RadioProps>> = forwardRef<
342352
})}
343353
focusable={Platform.OS === "web" ? focusable : undefined}
344354
{...(description ? {} : handlers)}
355+
{...focusProps}
345356
>
346357
{(touchState: PressableStateCallbackType) =>
347358
children({
348359
pressed: touchState.pressed,
349360
isHovered: !!hovered.value,
350-
isFocussed: !!focused.value,
361+
isFocussed: !!(isFocused && isFocusVisible),
351362
})
352363
}
353364
</Touchable>

‎src/components/select/SelectOption.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -135,6 +135,12 @@ const RNSelectOption: React.FC<SelectOptionProps> = forwardRef<
135135
: "",
136136
),
137137
),
138+
/**
139+
* * The TypeScript error arises due to an inconsistency between the expected ViewStyle type
140+
* * and the specific styling provided for the web platform,
141+
* * which includes outline and boxShadow properties not defined in the ViewStyle type.
142+
*/
143+
// @ts-ignore
138144
isFocussed && !hasOnlyLabel
139145
? Platform.select({
140146
web: {

‎src/components/tag/Tag.tsx‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,9 @@ import {
1717
RenderPropType,
1818
styleAdapter,
1919
useHaptic,
20-
useOnFocus,
2120
useOnHover,
2221
useScaleAnimation,
22+
useWebFocusRing,
2323
} from "../../utils";
2424
import { createIcon } from "../create-icon";
2525
import { Icon } from "../icon";
@@ -87,7 +87,7 @@ const RNTag: React.FC<Partial<TagProps>> = forwardRef<
8787
const tagTheme = useTheme("tag");
8888

8989
const { onHoverIn, onHoverOut, hovered } = useOnHover();
90-
const { onFocus, onBlur, focused } = useOnFocus();
90+
const { focusProps, isFocusVisible, isFocused } = useWebFocusRing();
9191
const { handlers, animatedStyle } = useScaleAnimation();
9292
const hapticSelection = useHaptic();
9393

@@ -193,6 +193,12 @@ const RNTag: React.FC<Partial<TagProps>> = forwardRef<
193193
<AnimatedBox style={animatedStyle}>
194194
<Touchable
195195
ref={ref}
196+
/**
197+
* * The TypeScript error arises due to an inconsistency between the expected ViewStyle type
198+
* * and the specific styling provided for the web platform,
199+
* * which includes outline and boxShadow properties not defined in the ViewStyle type.
200+
*/
201+
// @ts-ignore
196202
style={(touchState: PressableStateCallbackType) => [
197203
ts(
198204
cx(
@@ -211,10 +217,10 @@ const RNTag: React.FC<Partial<TagProps>> = forwardRef<
211217
: "",
212218
),
213219
),
214-
focused.value
220+
Platform.OS === "web" ? tagTheme.web : {},
221+
isFocusVisible && isFocused
215222
? Platform.select({
216223
web: {
217-
outline: 0,
218224
boxShadow: `${generateBoxShadow(
219225
tagTheme.themeColor[themeColor]?.[variant]?.container?.focus
220226
?.offset,
@@ -237,8 +243,7 @@ const RNTag: React.FC<Partial<TagProps>> = forwardRef<
237243
// Web Callbacks
238244
onHoverIn={onHoverIn}
239245
onHoverOut={onHoverOut}
240-
onFocus={onFocus}
241-
onBlur={onBlur}
246+
{...focusProps}
242247
// Web Callbacks
243248
accessible
244249
accessibilityRole="button"

‎src/components/text-area/TextArea.tsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { forwardRef, useMemo, useRef, useState } from "react";
2-
import { Platform, TextInputProps } from "react-native";
2+
import { Platform, TextInputProps, TextStyleAndroid } from "react-native";
33

44
import { Box, BoxProps, RNTextInput, TouchableProps } from "../../primitives";
55
import { getTextFontFamily, useTailwind, useTheme } from "../../theme";
@@ -236,6 +236,12 @@ const RNTextArea: React.FC<Partial<TextAreaProps>> = forwardRef<
236236
),
237237
),
238238
getTextFontFamily(textAreaTheme.size[size]?.base?.default),
239+
/**
240+
* * The TypeScript error arises due to an inconsistency between the expected ViewStyle type
241+
* * and the specific styling provided for the web platform,
242+
* * which includes outline and boxShadow properties not defined in the ViewStyle type.
243+
*/
244+
// @ts-ignore
239245
isFocussedWeb.value
240246
? Platform.select({
241247
web: {
@@ -251,7 +257,9 @@ const RNTextArea: React.FC<Partial<TextAreaProps>> = forwardRef<
251257
},
252258
})
253259
: {},
254-
Platform.OS === "android" ? textAreaTheme.android : {},
260+
Platform.OS === "android"
261+
? (textAreaTheme.android as TextStyleAndroid)
262+
: {},
255263
styleAdapter(textInputStyle),
256264
]}
257265
multiline={true}

0 commit comments

Comments
 (0)