@audira/carbon-react-native 1.0.0-beta.8 → 1.0.0

package/src/components/text-input-field/TextInputField.tsx

@@ -25,8 +25,10 @@ import IconWarningAltFilled from "@carbon/icons/svg/32/warning--alt--filled.svg"
 import IconWarningFilled from "@carbon/icons/svg/32/warning--filled.svg"
 
 import {
-	CarbonStyleSheet,
-} from "../../carbon-style-sheet"
+	GlobalConfigContext,
+} from "../../_internal/contexts"
+
+import * as CarbonStyleSheet from "../../carbon-style-sheet"
 
 import {
 	ThemeContext,
@@ -36,6 +38,10 @@ import type {
 	ThemeType,
 } from "../../types"
 
+import {
+	Box,
+} from "../box"
+
 import {
 	LayerContext,
 } from "../layer"
@@ -152,6 +158,9 @@ export const TextInputField = forwardRef<TextInputFieldRef, TextInputFieldProps>
 	) {
 
 		const
+			globalConfigContext =
+				useContext(GlobalConfigContext),
+
 			themeContext =
 				useContext(ThemeContext),
 
@@ -211,7 +220,7 @@ export const TextInputField = forwardRef<TextInputFieldRef, TextInputFieldProps>
 		}, [])
 
 		return (
-			<Animated.View
+			<AnimatedBox
 				ref={ ref }
 				{ ...viewProps }
 				style={ [
@@ -317,7 +326,9 @@ export const TextInputField = forwardRef<TextInputFieldRef, TextInputFieldProps>
 						height={ 16 }
 						fill={ mapIconInvalidColor[themeContext.colorScheme] }
 						style={ [
+							CarbonStyleSheet.g.absolute,
 							styleSheet.icon,
+							mapStyleSheetIconInteractiveStatePosition[`${globalConfigContext.rtl}`],
 							iconBySizeStyleSheet[size],
 						] }
 					/>
@@ -327,20 +338,25 @@ export const TextInputField = forwardRef<TextInputFieldRef, TextInputFieldProps>
 						height={ 16 }
 						fill={ mapIconWarningColor[themeContext.colorScheme] }
 						style={ [
+							CarbonStyleSheet.g.absolute,
 							styleSheet.icon,
+							mapStyleSheetIconInteractiveStatePosition[`${globalConfigContext.rtl}`],
 							iconBySizeStyleSheet[size],
 						] }
 					/>
 				) : undefined }
 
 				{ blockEndNode }
-			</Animated.View>
+			</AnimatedBox>
 		)
 
 	},
 )
 
 const
+	AnimatedBox =
+		Animated.createAnimatedComponent(Box),
+
 	styleSheet =
 		StyleSheet.create({
 			textInputField: {
@@ -350,11 +366,23 @@ const
 			},
 			icon: {
 				pointerEvents: "none",
-				position: "absolute",
+			},
+			iconLtr: {
 				right: Spacing.spacing_05,
 			},
+			iconRtl: {
+				left: Spacing.spacing_05,
+			},
 		}),
 
+	mapStyleSheetIconInteractiveStatePosition: {
+		[RTL in `${boolean}`]: ViewStyle
+	} =
+		{
+			false: styleSheet.iconLtr,
+			true: styleSheet.iconRtl,
+		},
+
 	textInputFieldSizeStyleSheet =
 		StyleSheet.create<Record<TextInputFieldSize, ViewStyle>>({
 			small: {

package/src/components/text-input-field/_rn-text-input/RNTextInput.tsx

@@ -20,9 +20,7 @@ import {
 	GlobalConfigContext,
 } from "../../../_internal/contexts"
 
-import {
-	CommonStyleSheet,
-} from "../../../_internal/style-sheets"
+import * as CarbonStyleSheet from "../../../carbon-style-sheet"
 
 import {
 	ThemeContext,
@@ -74,7 +72,7 @@ export const RNTextInput = forwardRef<RNTextInputRef, RNTextInputProps>(
 				style={ [
 					styleSheet.rnTextInput as unknown as never, // FIXME: i don't know the correct type
 					mapStateStyleSheet[themeContext.colorScheme][interactiveState],
-					globalConfigContext.rtl ? CommonStyleSheet.rtl : undefined,
+					globalConfigContext.rtl ? CarbonStyleSheet.g.rtl : undefined,
 					style,
 				] }
 			/>

package/src/components/text-input-fluid/TextInputFluid.tsx

@@ -15,9 +15,7 @@ import {
 import IconWarningAltFilled from "@carbon/icons/svg/32/warning--alt--filled.svg"
 import IconWarningFilled from "@carbon/icons/svg/32/warning--filled.svg"
 
-import {
-	FlexStyleSheet,
-} from "../../_internal/style-sheets"
+import * as CarbonStyleSheet from "../../carbon-style-sheet"
 
 import {
 	ThemeContext,
@@ -55,6 +53,8 @@ export const TextInputFluid = forwardRef<TextInputFluidRef, TextInputFluidProps>
 			interactiveState,
 			style,
 			textInputStyle,
+			blockStartNode,
+			blockEndNode,
 			...textInputFieldProps
 		},
 		ref,
@@ -71,18 +71,19 @@ export const TextInputFluid = forwardRef<TextInputFluidRef, TextInputFluidProps>
 				size="medium"
 				interactiveState={ interactiveState }
 				hideInteractiveStateIcon
-				blockStartNode={
+				blockStartNode={ (<>
 					<FormLabel
 						label={ label }
 						style={ styleSheet.label }
 					/>
-				}
-				blockEndNode={
-					!!helperText?.length && (
+					{ blockStartNode }
+				</>) }
+				blockEndNode={ (<>
+					{ !!helperText && (
 						<FormHelperText
 							text={ helperText }
 							style={ [
-								FlexStyleSheet.flex_initial,
+								CarbonStyleSheet.g.flex_initial,
 								styleSheet.helperText,
 							] }
 							textTrailing={
@@ -101,8 +102,9 @@ export const TextInputFluid = forwardRef<TextInputFluidRef, TextInputFluidProps>
 								) : undefined
 							}
 						/>
-					)
-				}
+					) }
+					{ blockEndNode }
+				</>) }
 				style={ [
 					styleSheet.textInputFluid,
 					helperText?.length

package/src/components/text-input-fluid/TextInputFluidProps.ts

@@ -6,8 +6,6 @@ export interface TextInputFluidProps extends Omit<
 	TextInputFieldProps,
 	| "size"
 	| "hideInteractiveStateIcon"
-	| "blockStartNodes"
-	| "blockEndNodes"
 > {
 	label: string,
 	helperText?: string,

package/src/components/toggle/base/Base.tsx

@@ -23,15 +23,16 @@ import {
 	GlobalConfigContext,
 } from "../../../_internal/contexts"
 
-import {
-	CommonStyleSheet,
-	FlexStyleSheet,
-} from "../../../_internal/style-sheets"
+import * as CarbonStyleSheet from "../../../carbon-style-sheet"
 
 import {
 	ThemeContext,
 } from "../../../contexts"
 
+import {
+	Box,
+} from "../../box"
+
 import {
 	FormLabel,
 } from "../../form-label"
@@ -115,14 +116,13 @@ export const Base = forwardRef<BaseRef, BaseProps>(
 		}, [])
 
 		return (
-			<View
+			<Box
 				{ ...viewProps }
 				dir={ dir ?? globalConfigContext.rtl ? "rtl" : undefined }
 				style={ [
-					FlexStyleSheet.flex_row,
-					FlexStyleSheet.flex_wrap,
-					FlexStyleSheet.items_center,
-					globalConfigContext.rtl ? CommonStyleSheet.rtl : undefined,
+					CarbonStyleSheet.g.flex_row,
+					CarbonStyleSheet.g.flex_wrap,
+					CarbonStyleSheet.g.items_center,
 					style,
 				] }
 				ref={ viewRef }
@@ -135,9 +135,9 @@ export const Base = forwardRef<BaseRef, BaseProps>(
 					aria-label={ pressableProps?.["aria-label"] || label }
 					onPress={ pressHandler }
 					style={ [
-						CommonStyleSheet.absolute,
-						CommonStyleSheet.w_full,
-						CommonStyleSheet.h_full,
+						CarbonStyleSheet.g.absolute,
+						CarbonStyleSheet.g.w_full,
+						CarbonStyleSheet.g.h_full,
 						baseStyle.pressable,
 						pressableProps?.style,
 					] }
@@ -155,7 +155,7 @@ export const Base = forwardRef<BaseRef, BaseProps>(
 							],
 						}}
 						style={ [
-							CommonStyleSheet.w_full,
+							CarbonStyleSheet.g.w_full,
 							baseStyle.label,
 							formLabelProps?.style,
 						] }
@@ -194,7 +194,7 @@ export const Base = forwardRef<BaseRef, BaseProps>(
 						{ actionText }
 					</Text>
 				) }
-			</View>
+			</Box>
 		)
 
 	},

package/src/const/dialog-animation-configs/carbon-react.ts

@@ -1,5 +1,6 @@
 import {
 	Easing,
+	Platform,
 } from "react-native"
 
 import {
@@ -50,4 +51,8 @@ export const CarbonReact = {
 			Motion.Easing.exit.expressive.y2,
 		),
 	],
+	useNativeDriver:
+		Platform.OS === "android" ||
+		Platform.OS === "ios" ||
+		Platform.OS === "web",
 } as const satisfies Required<DialogProviderAnimationConfig>

package/src/const/dialog-animation-configs/fade-bottom-up-2.ts

@@ -1,5 +1,6 @@
 import {
 	Easing,
+	Platform,
 } from "react-native"
 
 import {
@@ -33,4 +34,8 @@ export const FadeBottomUp2 = {
 		Motion.Easing.entrance.expressive.x2,
 		Motion.Easing.entrance.expressive.y2,
 	),
+	useNativeDriver:
+		Platform.OS === "android" ||
+		Platform.OS === "ios" ||
+		Platform.OS === "web",
 } as const satisfies Required<DialogProviderAnimationConfig>

package/src/const/dialog-animation-configs/fade-bottom-up.ts

@@ -1,5 +1,6 @@
 import {
 	Easing,
+	Platform,
 } from "react-native"
 
 import {
@@ -33,4 +34,8 @@ export const FadeBottomUp = {
 		Motion.Easing.entrance.expressive.x2,
 		Motion.Easing.entrance.expressive.y2,
 	),
+	useNativeDriver:
+		Platform.OS === "android" ||
+		Platform.OS === "ios" ||
+		Platform.OS === "web",
 } as const satisfies Required<DialogProviderAnimationConfig>

package/src/helpers/color/get-color-scheme.ts

@@ -16,4 +16,5 @@ const
 		{
 			light: "gray_10",
 			dark: "gray_100",
+			unspecified: "gray_10",
 		}

package/src/index.ts

@@ -1,5 +1,10 @@
+import * as CarbonStyleSheet from "./carbon-style-sheet"
+
+export {
+	CarbonStyleSheet,
+}
+
 export * from "./carbon-react-native"
-export * from "./carbon-style-sheet"
 export * from "./components"
 export * from "./const"
 export * from "./contexts"

package/src/providers/dialog/DialogProvider.tsx

@@ -1,11 +1,20 @@
 import {
 	forwardRef,
 	useCallback,
+	useEffect,
 	useImperativeHandle,
 	useRef,
 	useState,
 } from "react"
 
+import {
+	InDialogContext,
+} from "../../_internal/contexts"
+
+import {
+	DialogAnimationConfigs,
+} from "../../const"
+
 import {
 	DialogContext,
 	type DialogData,
@@ -21,6 +30,7 @@ import type {
 
 import {
 	Controller,
+	type ControllerProps,
 	type ControllerRef,
 } from "./_controller"
 
@@ -28,7 +38,7 @@ export const DialogProvider = forwardRef<DialogProviderRef, DialogProviderProps>
 	function DialogProvider(
 		{
 			children,
-			animationConfig,
+			animationConfig = DialogAnimationConfigs.CarbonReact,
 			modalProps,
 			overlayProps,
 			overlayTouchDismiss,
@@ -37,50 +47,22 @@ export const DialogProvider = forwardRef<DialogProviderRef, DialogProviderProps>
 	) {
 
 		const
-			controllerRef =
-				useRef<ControllerRef>(null),
-
-			dialogDataQueue =
-				useRef<DialogData>(null),
-
-			[mountController, setMountController] =
-				useState(false),
-
-			setControllerRef: React.RefCallback<ControllerRef> =
-				useCallback(ref => {
-					controllerRef.current = ref
-
-					if(controllerRef.current && dialogDataQueue.current) {
-						controllerRef.current.show({ ...dialogDataQueue.current })
-						dialogDataQueue.current = null
-					}
-				}, []),
+			controllerWrapperRef =
+				useRef<ControllerWrapperRef>(null),
 
 			show: DialogContext["show"] =
 				useCallback(data => {
-					if(!controllerRef.current) {
-						dialogDataQueue.current = { ...data }
-						setMountController(true)
-					} else {
-						controllerRef.current?.show(data)
-					}
+					controllerWrapperRef.current?.show(data)
 				}, []),
 
 			dismiss: DialogContext["dismiss"] =
 				useCallback(async () => {
-					return controllerRef.current?.dismiss()
+					return controllerWrapperRef.current?.dismiss()
 				}, []),
 
 			dismissAll: DialogContext["dismissAll"] =
 				useCallback(async () => {
-					return controllerRef.current?.dismissAll()
-				}, []),
-
-			onEmpty =
-				useCallback(() => {
-					if(!dialogDataQueue.current) {
-						setMountController(false)
-					}
+					return controllerWrapperRef.current?.dismissAll()
 				}, [])
 
 		useImperativeHandle(ref, () => {
@@ -105,18 +87,107 @@ export const DialogProvider = forwardRef<DialogProviderRef, DialogProviderProps>
 			>
 				{ children }
 
-				{ mountController && (
-					<Controller
-						ref={ setControllerRef }
-						animationConfig={ animationConfig }
-						modalProps={ modalProps }
-						overlayProps={ overlayProps }
-						overlayTouchDismiss={ overlayTouchDismiss }
-						onEmpty={ onEmpty }
-					/>
-				) }
+				<ControllerWrapper
+					ref={ controllerWrapperRef }
+					animationConfig={ animationConfig as typeof DialogAnimationConfigs.CarbonReact }
+					modalProps={ modalProps }
+					overlayProps={ overlayProps }
+					overlayTouchDismiss={ overlayTouchDismiss }
+				/>
 			</DialogContext.Provider>
 		)
 
 	},
 )
+
+interface ControllerWrapperProps extends Omit<ControllerProps, "onEmpty"> {
+}
+
+interface ControllerWrapperRef extends ControllerRef {
+}
+
+/**
+ * Generally speaking, I created this component just to save a bit of memory by not mounting the actual `Controller` when it's not needed,
+ * but, I don't know this component is actually a optimization or even worse
+ */
+const ControllerWrapper = forwardRef<ControllerWrapperRef, ControllerWrapperProps>(
+	function ControllerWrapper(
+		props,
+		ref,
+	) {
+
+		const
+			[mount, setMount] =
+				useState(false),
+
+			controllerRef =
+				useRef<ControllerRef>(null)
+
+		const
+			dialogDataQueue =
+				useRef<DialogData>(null)
+		// Can't continue from this var
+		// eslint-plugin-react-hooks will complains
+
+		const
+			onEmpty =
+				useCallback(() => {
+					if(!dialogDataQueue.current && controllerRef.current) {
+						setMount(false)
+					}
+				}, [])
+
+		useImperativeHandle(ref, () => {
+			const errMsg = "Error to get the Controller's ref"
+
+			return {
+				show(data) {
+					if(controllerRef.current) {
+						controllerRef.current.show(data)
+					} else {
+						dialogDataQueue.current = data
+						setMount(true)
+					}
+				},
+				dismiss() {
+					if(controllerRef.current) {
+						return controllerRef.current.dismiss()
+					}
+					console.error(errMsg)
+					return Promise.resolve()
+				},
+				dismissAll() {
+					if(controllerRef.current) {
+						return controllerRef.current.dismissAll()
+					}
+					console.error(errMsg)
+					return Promise.resolve()
+				},
+			}
+		}, [])
+
+		useEffect(() => {
+			if(mount && dialogDataQueue.current && controllerRef.current) {
+				controllerRef.current.show({ ...dialogDataQueue.current })
+				dialogDataQueue.current = null
+			}
+		}, [
+			mount,
+		])
+
+		if(!mount) {
+			return null
+		}
+
+		return (
+			<InDialogContext.Provider value>
+				<Controller
+					ref={ controllerRef }
+					{ ...props }
+					onEmpty={ onEmpty }
+				/>
+			</InDialogContext.Provider>
+		)
+
+	},
+)

package/src/providers/dialog/DialogProviderAnimationConfig.ts

@@ -17,6 +17,7 @@ export interface DialogProviderAnimationConfig {
 	 * @default DialogAnimationConfigs.CarbonReact.duration
 	 */
 	readonly duration?: number | [number, number, number],
+
 	/**
 	 * Input range interpolation:
 	 * - `0` -> Unmounted style
@@ -46,4 +47,14 @@ export interface DialogProviderAnimationConfig {
 	readonly modalEasing?:
 		| EasingFunction
 		| [EasingFunction, EasingFunction, EasingFunction],
+
+	/**
+	 * Somehow, the `useNativeDriver` doesn't work on `react-native-macos` and `react-native-windows`
+	 * @default true - Android
+	 * @default true - iOS
+	 * @default true - Web
+	 * @default false - macOS
+	 * @default false - Windows
+	 */
+	useNativeDriver?: boolean,
 }

package/src/providers/dialog/_controller/Controller.tsx

@@ -12,10 +12,6 @@ import {
 	StyleSheet,
 } from "react-native"
 
-import {
-	DialogAnimationConfigs,
-} from "../../../const"
-
 import type {
 	DialogData,
 } from "../../../contexts/dialog/DialogData"
@@ -56,8 +52,11 @@ export const Controller = forwardRef<ControllerRef, ControllerProps>(
 
 		const
 			[data, setData] =
-				useState<DialogDataState[]>([]),
+				useState<DialogDataState[]>([])
+		// Can't continue from this var
+		// eslint-plugin-react-hooks will complains
 
+		const
 			modalRefs =
 				useRef<ModalRef[]>([]),
 
@@ -173,9 +172,8 @@ export const Controller = forwardRef<ControllerRef, ControllerProps>(
 				ref={ overlayRef }
 				{ ...overlayProps }
 				animationConfig={{
-					duration:
-						getSingleAnimationConfigDuration(animationConfig?.duration) ??
-						DialogAnimationConfigs.CarbonReact.duration,
+					duration: getSingleAnimationConfigDuration(animationConfig.duration),
+					useNativeDriver: animationConfig.useNativeDriver,
 				}}
 			>
 				{ data.map((item, index) => {
@@ -210,14 +208,10 @@ type DialogDataState =
 		| "stack"
 	>
 
-function getSingleAnimationConfigDuration(duration: DialogProviderAnimationConfig["duration"]) {
+function getSingleAnimationConfigDuration(duration: NonNullable<DialogProviderAnimationConfig["duration"]>) {
 	if(typeof duration === "number") {
 		return duration
 	}
 
-	if(duration) {
-		return duration[0]
-	}
-
-	return undefined
+	return duration[0]
 }

package/src/providers/dialog/_controller/ControllerProps.ts

@@ -4,8 +4,10 @@ import type {
 
 export interface ControllerProps extends Omit<
 	DialogProviderProps,
+	| "animationConfig"
 	| "children"
 	| "defaultLazy"
 > {
+	animationConfig: Required<NonNullable<DialogProviderProps["animationConfig"]>>,
 	onEmpty: () => void,
 }

package/src/providers/dialog/_controller/_modal/Modal.tsx

@@ -10,13 +10,7 @@ import {
 	StyleSheet,
 } from "react-native"
 
-import {
-	FlexStyleSheet,
-} from "../../../../_internal/style-sheets"
-
-import {
-	DialogAnimationConfigs,
-} from "../../../../const"
+import * as CarbonStyleSheet from "../../../../carbon-style-sheet"
 
 import type {
 	ModalProps,
@@ -29,7 +23,7 @@ import type {
 export const Modal = forwardRef<ModalRef, ModalProps>(
 	function(
 		{
-			animationConfig = DialogAnimationConfigs.CarbonReact,
+			animationConfig,
 			style,
 			...props
 		},
@@ -61,7 +55,7 @@ export const Modal = forwardRef<ModalRef, ModalProps>(
 						easing: Array.isArray(animationConfig.modalEasing)
 							? animationConfig.modalEasing[1]
 							: animationConfig.modalEasing,
-						useNativeDriver: true,
+						useNativeDriver: animationConfig.useNativeDriver,
 					},
 				).start()
 			}
@@ -85,7 +79,7 @@ export const Modal = forwardRef<ModalRef, ModalProps>(
 									easing: Array.isArray(animationConfig.modalEasing)
 										? animationConfig.modalEasing[value]
 										: animationConfig.modalEasing,
-									useNativeDriver: true,
+									useNativeDriver: animationConfig.useNativeDriver,
 								},
 							)
 							.start(({ finished }) => {
@@ -110,7 +104,7 @@ export const Modal = forwardRef<ModalRef, ModalProps>(
 										easing: Array.isArray(animationConfig.modalEasing)
 											? animationConfig.modalEasing[to]
 											: animationConfig.modalEasing,
-										useNativeDriver: true,
+										useNativeDriver: animationConfig.useNativeDriver,
 									},
 								),
 							])
@@ -130,13 +124,15 @@ export const Modal = forwardRef<ModalRef, ModalProps>(
 		return (
 			<Animated.View
 				{ ...props }
+				/* eslint-disable react-hooks/refs */
 				style={ [
 					StyleSheet.absoluteFill,
-					FlexStyleSheet.items_center,
-					FlexStyleSheet.justify_center,
+					CarbonStyleSheet.g.items_center,
+					CarbonStyleSheet.g.justify_center,
 					animationConfig.modalStyleFactory(interpolation.current, interpolationInputRange),
 					style,
 				] }
+				/* eslint-enable react-hooks/refs */
 			/>
 		)