@audira/carbon-react-native 1.0.0-beta.10 → 1.0.0-beta.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@audira/carbon-react-native",
-  "version": "1.0.0-beta.10",
+  "version": "1.0.0-beta.12",
   "license": "MIT",
   "homepage": "https://rakadoank.github.io/carbon-react-native",
   "repository": "https://github.com/RakaDoank/carbon-react-native",

package/src/components/notification/_variants/actionable/ActionableVariantProps.ts

@@ -18,7 +18,6 @@ export interface ActionableVariantProps extends Omit<
 	BaseProps,
 	| "inline"
 	| "body"
-	| "icon"
 	| "iconClose"
 	| "nodes"
 	| "leftContainerStyle"

package/src/components/notification/_variants/actionable-inline/ActionableInlineVariantProps.ts

@@ -18,7 +18,6 @@ export interface ActionableInlineVariantProps extends Omit<
 	BaseProps,
 	| "inline"
 	| "body"
-	| "icon"
 	| "iconClose"
 	| "nodes"
 	| "leftContainerStyle"

package/src/components/notification/_variants/callout/CalloutVariantProps.ts

@@ -14,7 +14,6 @@ export interface CalloutVariantProps extends Omit<
 	BaseProps,
 	| "inline"
 	| "body"
-	| "icon"
 	| "iconClose"
 	| "nodes"
 	| "leftContainerStyle"

package/src/components/notification/_variants/callout-inline/CalloutInlineVariantProps.ts

@@ -14,7 +14,6 @@ export interface CalloutInlineVariantProps extends Omit<
 	BaseProps,
 	| "inline"
 	| "body"
-	| "icon"
 	| "iconClose"
 	| "nodes"
 	| "leftContainerStyle"

package/src/components/notification/_variants/toast/ToastVariantProps.ts

@@ -14,7 +14,6 @@ export interface ToastVariantProps extends Omit<
 	BaseProps,
 	| "inline"
 	| "body"
-	| "icon"
 	| "iconClose"
 	| "nodes"
 	| "leftContainerStyle"

package/src/components/notification/actionable-inline/error/ErrorProps.ts

@@ -2,7 +2,7 @@ import type {
 	ActionableInlineVariantProps,
 } from "../../_variants/actionable-inline"
 
-export interface ErrorProps extends Omit<ActionableInlineVariantProps, "icon"> {
+export interface ErrorProps extends Omit<ActionableInlineVariantProps, "Icon"> {
 	iconProps?: Omit<
 		NonNullable<ActionableInlineVariantProps["iconProps"]>,
 		| "color"

package/src/components/notification/actionable-inline/informational/InformationalProps.ts

@@ -2,7 +2,7 @@ import type {
 	ActionableInlineVariantProps,
 } from "../../_variants/actionable-inline"
 
-export interface InformationalProps extends Omit<ActionableInlineVariantProps, "icon"> {
+export interface InformationalProps extends Omit<ActionableInlineVariantProps, "Icon"> {
 	iconProps?: Omit<
 		NonNullable<ActionableInlineVariantProps["iconProps"]>,
 		| "color"

package/src/components/notification/actionable-inline/success/SuccessProps.ts

@@ -2,7 +2,7 @@ import type {
 	ActionableInlineVariantProps,
 } from "../../_variants/actionable-inline"
 
-export interface SuccessProps extends Omit<ActionableInlineVariantProps, "icon"> {
+export interface SuccessProps extends Omit<ActionableInlineVariantProps, "Icon"> {
 	iconProps?: Omit<
 		NonNullable<ActionableInlineVariantProps["iconProps"]>,
 		| "color"

package/src/components/notification/actionable-inline/warning/WarningProps.ts

@@ -2,7 +2,7 @@ import type {
 	ActionableInlineVariantProps,
 } from "../../_variants/actionable-inline"
 
-export interface WarningProps extends Omit<ActionableInlineVariantProps, "icon"> {
+export interface WarningProps extends Omit<ActionableInlineVariantProps, "Icon"> {
 	iconProps?: Omit<
 		NonNullable<ActionableInlineVariantProps["iconProps"]>,
 		| "color"

package/src/components/notification/callout/error/ErrorProps.ts

@@ -2,7 +2,7 @@ import type {
 	CalloutVariantProps,
 } from "../../_variants/callout"
 
-export interface ErrorProps extends Omit<CalloutVariantProps, "icon"> {
+export interface ErrorProps extends Omit<CalloutVariantProps, "Icon"> {
 	iconProps?: Omit<
 		NonNullable<CalloutVariantProps["iconProps"]>,
 		| "color"

package/src/components/notification/callout/informational/InformationalProps.ts

@@ -2,7 +2,7 @@ import type {
 	CalloutVariantProps,
 } from "../../_variants/callout"
 
-export interface InformationalProps extends Omit<CalloutVariantProps, "icon"> {
+export interface InformationalProps extends Omit<CalloutVariantProps, "Icon"> {
 	iconProps?: Omit<
 		NonNullable<CalloutVariantProps["iconProps"]>,
 		| "color"

package/src/components/notification/callout/success/SuccessProps.ts

@@ -2,7 +2,7 @@ import type {
 	CalloutInlineVariantProps,
 } from "../../_variants/callout-inline"
 
-export interface SuccessProps extends Omit<CalloutInlineVariantProps, "icon"> {
+export interface SuccessProps extends Omit<CalloutInlineVariantProps, "Icon"> {
 	iconProps?: Omit<
 		NonNullable<CalloutInlineVariantProps["iconProps"]>,
 		| "color"

package/src/components/notification/callout/warning/WarningProps.ts

@@ -2,7 +2,7 @@ import type {
 	CalloutVariantProps,
 } from "../../_variants/callout"
 
-export interface WarningProps extends Omit<CalloutVariantProps, "icon"> {
+export interface WarningProps extends Omit<CalloutVariantProps, "Icon"> {
 	iconProps?: Omit<
 		NonNullable<CalloutVariantProps["iconProps"]>,
 		| "color"

package/src/components/notification/callout-inline/error/ErrorProps.ts

@@ -2,7 +2,7 @@ import type {
 	CalloutInlineVariantProps,
 } from "../../_variants/callout-inline"
 
-export interface ErrorProps extends Omit<CalloutInlineVariantProps, "icon"> {
+export interface ErrorProps extends Omit<CalloutInlineVariantProps, "Icon"> {
 	iconProps?: Omit<
 		NonNullable<CalloutInlineVariantProps["iconProps"]>,
 		| "color"

package/src/components/notification/callout-inline/informational/InformationalProps.ts

@@ -2,7 +2,7 @@ import type {
 	CalloutInlineVariantProps,
 } from "../../_variants/callout-inline"
 
-export interface InformationalProps extends Omit<CalloutInlineVariantProps, "icon"> {
+export interface InformationalProps extends Omit<CalloutInlineVariantProps, "Icon"> {
 	iconProps?: Omit<
 		NonNullable<CalloutInlineVariantProps["iconProps"]>,
 		| "color"

package/src/components/notification/callout-inline/success/SuccessProps.ts

@@ -2,7 +2,7 @@ import type {
 	ToastVariantProps,
 } from "../../_variants/toast"
 
-export interface SuccessProps extends Omit<ToastVariantProps, "icon"> {
+export interface SuccessProps extends Omit<ToastVariantProps, "Icon"> {
 	iconProps?: Omit<
 		NonNullable<ToastVariantProps["iconProps"]>,
 		| "color"

package/src/components/notification/callout-inline/warning/WarningProps.ts

@@ -2,7 +2,7 @@ import type {
 	CalloutInlineVariantProps,
 } from "../../_variants/callout-inline"
 
-export interface WarningProps extends Omit<CalloutInlineVariantProps, "icon"> {
+export interface WarningProps extends Omit<CalloutInlineVariantProps, "Icon"> {
 	iconProps?: Omit<
 		NonNullable<CalloutInlineVariantProps["iconProps"]>,
 		| "color"

package/src/providers/dialog/DialogProvider.tsx

@@ -101,7 +101,6 @@ export const DialogProvider = forwardRef<DialogProviderRef, DialogProviderProps>
 )
 
 interface ControllerWrapperProps extends Omit<ControllerProps, "onEmpty"> {
-	ref?: React.Ref<ControllerWrapperRef>,
 }
 
 interface ControllerWrapperRef extends ControllerRef {
@@ -110,78 +109,80 @@ interface ControllerWrapperRef extends ControllerRef {
 /**
  * This is a simple component to save a bit of memory by not mounting the actual `Controller` when it's not needed
  */
-function ControllerWrapper({
-	ref,
-	...props
-}: ControllerWrapperProps) {
-
-	const
-		[mount, setMount] =
-			useState(false),
-
-		controllerRef =
-			useRef<ControllerRef>(null),
-
-		dialogDataQueue =
-			useRef<DialogData>(null),
-
-		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()
-			},
-		}
-	}, [])
+const ControllerWrapper = forwardRef<ControllerWrapperRef, ControllerWrapperProps>(
+	function ControllerWrapper(
+		props,
+		ref,
+	) {
+
+		const
+			[mount, setMount] =
+				useState(false),
+
+			controllerRef =
+				useRef<ControllerRef>(null),
+
+			dialogDataQueue =
+				useRef<DialogData>(null),
 
-	useEffect(() => {
-		if(mount && dialogDataQueue.current && controllerRef.current) {
-			controllerRef.current.show({ ...dialogDataQueue.current })
-			dialogDataQueue.current = null
+			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
 		}
-	}, [
-		mount,
-	])
-
-	if(!mount) {
-		return null
-	}
-
-	return (
-		<InDialogContext.Provider value>
-			<Controller
-				ref={ controllerRef }
-				{ ...props }
-				onEmpty={ onEmpty }
-			/>
-		</InDialogContext.Provider>
-	)
 
-}
+		return (
+			<InDialogContext.Provider value>
+				<Controller
+					ref={ controllerRef }
+					{ ...props }
+					onEmpty={ onEmpty }
+				/>
+			</InDialogContext.Provider>
+		)
+
+	},
+)

package/src/providers/toast/_overlay/Overlay.tsx

@@ -13,10 +13,6 @@ import {
 	type LayoutChangeEvent,
 } from "react-native"
 
-import {
-	Spacing,
-} from "@audira/carbon-react-native-elements"
-
 import {
 	GlobalConfigContext,
 } from "../../../_internal/contexts"
@@ -34,6 +30,10 @@ import {
 	type ComponentWrapperRef,
 } from "./_component-wrapper"
 
+import {
+	Gap,
+} from "./_gap"
+
 export const Overlay = forwardRef<OverlayRef>(
 	function(
 		___props,
@@ -91,12 +91,12 @@ export const Overlay = forwardRef<OverlayRef>(
 					) {
 						componentWrappersRef.current[index].cancelX() // cancel the current delay first
 						componentWrappersRef.current[index].shiftX(
-							componentsConfig.current[index].width + Spacing.spacing_03,
+							componentsConfig.current[index].width + Gap,
 						)
 						if(index > 0) {
 							for(let i = 0; i < index; i++) {
 								componentWrappersRef.current[i]?.shiftY(
-									-componentsConfig.current[index].height - Spacing.spacing_03,
+									-componentsConfig.current[index].height - Gap,
 								)
 							}
 						}
@@ -127,14 +127,14 @@ export const Overlay = forwardRef<OverlayRef>(
 						}
 
 						componentWrappersRef.current[index].shiftX(
-							-componentsConfig.current[index].width - Spacing.spacing_03,
+							-componentsConfig.current[index].width - Gap,
 						)
 
 						if(componentWrappersRef.current.length > 1) {
 							for(let i = 0; i < componentWrappersRef.current.length - 1; i++) {
 								componentWrappersRef.current[i]?.shiftY(
 									// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion, @typescript-eslint/no-extra-non-null-assertion
-									componentsConfig.current[0]!!.height + Spacing.spacing_03,
+									componentsConfig.current[0]!!.height + Gap,
 								)
 							}
 						}
@@ -151,12 +151,12 @@ export const Overlay = forwardRef<OverlayRef>(
 
 					if(componentsConfig.current[index]?.state === 1) {
 						componentWrappersRef.current[index]?.shiftX(
-							componentsConfig.current[index].width + Spacing.spacing_03,
+							componentsConfig.current[index].width + Gap,
 							componentsConfig.current[index].duration ?? globalConfigContext.toastDuration,
 						)
 					} else if(
 						componentsConfig.current[index]?.state === 2 &&
-						!componentsConfig.current.some(config => config.state < 2) // somehow, the state may increase to "3" when it's dismissed by click/press. only god knows it.
+						!componentsConfig.current.some(config => config.state < 2)
 					) {
 						// Delete all componentsConfig, componentWrappersRef, and components (react state) when it's all done
 						componentsConfig.current.splice(0, componentsConfig.current.length)

package/src/providers/toast/_overlay/_component-wrapper/ComponentWrapper.tsx

@@ -14,9 +14,16 @@ import {
 
 import {
 	Motion,
-	Spacing,
 } from "@audira/carbon-react-native-elements"
 
+import {
+	useSafeAreaInsets,
+} from "react-native-safe-area-context"
+
+import {
+	Gap,
+} from "../_gap"
+
 import type {
 	ComponentWrapperProps,
 } from "./ComponentWrapperProps"
@@ -37,6 +44,9 @@ export const ComponentWrapper = forwardRef<ComponentWrapperRef, ComponentWrapper
 	) {
 
 		const
+			safeAreaInsets =
+				useSafeAreaInsets(),
+
 			translateX =
 				useRef(new Animated.Value(0)),
 
@@ -44,7 +54,7 @@ export const ComponentWrapper = forwardRef<ComponentWrapperRef, ComponentWrapper
 				useRef(0),
 
 			translateY =
-				useRef(new Animated.Value(0)),
+				useRef(new Animated.Value(safeAreaInsets.top + Gap)),
 
 			translateYValueJS =
 				useRef(0)
@@ -148,13 +158,15 @@ const
 		StyleSheet.create({
 			componentWrapper: {
 				position: "absolute",
-				top: Spacing.spacing_03,
 				left: "100%",
 				width: "auto",
 				...Platform.select({
 					web: {
 						flexDirection: "row",
 					},
+					android: {
+						top: Gap, // iOS doesn't need this, Apple handles it internally
+					},
 				}),
 			},
 		}),

package/src/providers/toast/_overlay/_gap.ts

@@ -0,0 +1,5 @@
+import {
+	Spacing,
+} from "@audira/carbon-react-native-elements"
+
+export const Gap = Spacing.spacing_03