Update 1.0.5

.github/workflows/deploy-storybook.yml

@@ -4,9 +4,11 @@ on:
   push:
     branches:
       - deploy-storybook
-  pull_request:
+  pull_request_target:
     branches:
       - deploy-storybook
+    types:
+      - closed
 
 jobs:
   deploy-storybook:

.github/workflows/release.yml

@@ -4,9 +4,11 @@ on:
   push:
     branches:
       - release
-  pull_request:
+  pull_request_target:
     branches:
       - release
+    types:
+      - closed
 
 jobs:
   release:

packages/carbon-react-native/package.json

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

packages/carbon-react-native/src/_internal/contexts/global-config/GlobalConfigContext.ts

@@ -2,6 +2,10 @@ import {
 	createContext,
 } from "react"
 
+import {
+	I18nManager,
+} from "react-native"
+
 import type {
 	NotificationColor,
 } from "../../../components/notification/NotificationColor"
@@ -26,5 +30,5 @@ export const GlobalConfigContext = createContext<GlobalConfigContext>({
 	android_buttonRippleEffect: true,
 	notificationColor: "high_contrast",
 	toastDuration: 5000,
-	rtl: false,
+	rtl: I18nManager.isRTL,
 })

packages/carbon-react-native/src/_internal/providers/global-config/GlobalConfigProvider.tsx

@@ -1,3 +1,7 @@
+import {
+	I18nManager,
+} from "react-native"
+
 import {
 	GlobalConfigContext,
 } from "../../contexts/global-config"
@@ -6,14 +10,20 @@ import type {
 	GlobalConfigProviderProps,
 } from "./GlobalConfigProviderProps"
 
+const isRtl = I18nManager.isRTL
+
 export function GlobalConfigProvider({
-	android_buttonRippleEffect,
-	notificationColor,
-	toastDuration,
-	rtl,
+	android_buttonRippleEffect = true,
+	notificationColor = "high_contrast",
+	toastDuration = 5000,
+	rtl: rtlProp,
 	children,
 }: GlobalConfigProviderProps) {
 
+	const
+		rtl =
+			rtlProp ?? isRtl
+
 	return (
 		<GlobalConfigContext.Provider
 			value={{

packages/carbon-react-native/src/_internal/providers/global-config/GlobalConfigProviderProps.ts

@@ -2,6 +2,6 @@ import type {
 	GlobalConfigContext,
 } from "../../contexts"
 
-export interface GlobalConfigProviderProps extends GlobalConfigContext {
+export interface GlobalConfigProviderProps extends Partial<GlobalConfigContext> {
 	children?: React.ReactNode,
 }

packages/carbon-react-native/src/carbon-react-native/CarbonReactNative.tsx

@@ -9,15 +9,15 @@ import type {
 } from "./CarbonReactNativeProps"
 
 export function CarbonReactNative({
-	// GlobalConfigProviderProps
-	android_buttonRippleEffect = true,
-	notificationColor = "high_contrast",
-	toastDuration = 5000,
-	rtl = false,
-
-	// ThemeProviderProps
+	// +++ GlobalConfigProviderProps +++
+	android_buttonRippleEffect,
+	notificationColor,
+	toastDuration,
+	rtl,
+	// --- GlobalConfigProviderProps ---
+	// +++ ThemeProviderProps +++
 	colorScheme,
-
+	// --- ThemeProviderProps ---
 	children,
 }: CarbonReactNativeProps) {
 

packages/carbon-react-native/src/carbon-react-native/CarbonReactNativeProps.ts

@@ -3,5 +3,5 @@ import type {
 	ThemeProviderProps,
 } from "../_internal/providers"
 
-export interface CarbonReactNativeProps extends Partial<GlobalConfigProviderProps>, ThemeProviderProps {
+export interface CarbonReactNativeProps extends GlobalConfigProviderProps, ThemeProviderProps {
 }

packages/carbon-react-native/src/components/box/Box.tsx

@@ -21,6 +21,12 @@ import type {
 	BoxRef,
 } from "./BoxRef"
 
+/**
+ * This component is a basic React Native `View` to solve
+ * RTL support for component level.
+ * 
+ * You may use this if your app provides custom localization options.
+ */
 export const Box = forwardRef<BoxRef, BoxProps>(
 	function Box(
 		{

packages/carbon-react-native/src/components/button/base/Base.tsx

@@ -73,7 +73,7 @@ export const Base = forwardRef<BaseRef, BaseProps>(
 				getIconSize(size),
 
 			iconMarginStyle =
-				mapIconMarginStyle[`${!!globalConfigContext.rtl}`][`${!!text}`]
+				mapIconMarginStyle[`${!!text}`]
 
 		return (
 			<Pressable
@@ -172,11 +172,8 @@ const
 				maxHeight: 48,
 			},
 
-			iconMarginLTR: {
-				marginLeft: Spacing.spacing_07,
-			},
-			iconMarginRTL: {
-				marginRight: Spacing.spacing_07,
+			iconMargin: {
+				marginStart: Spacing.spacing_07,
 			},
 
 			inlineLoading: {
@@ -241,19 +238,11 @@ const
 		},
 
 	mapIconMarginStyle: {
-		[RTL in `${boolean}`]: {
-			[HasText in `${boolean}`]: ViewProps["style"]
-		}
+		[HasText in `${boolean}`]: ViewProps["style"]
 	} =
 		{
-			false: {
-				false: null,
-				true: baseStyle.iconMarginLTR,
-			},
-			true: {
-				false: null,
-				true: baseStyle.iconMarginRTL,
-			},
+			false: null,
+			true: baseStyle.iconMargin,
 		},
 
 	mapStyleInButtonGroup: {

packages/carbon-react-native/src/components/button/ghost/Ghost.tsx

@@ -3,15 +3,13 @@ import {
 	useContext,
 } from "react"
 
-import {
-	StyleSheet,
-	type TextStyle,
-	type ViewStyle,
+import type {
+	TextStyle,
+	ViewStyle,
 } from "react-native"
 
 import {
 	Color,
-	Spacing,
 } from "@audira/carbon-react-native-elements"
 
 import * as CarbonStyleSheet from "../../../carbon-style-sheet"
@@ -38,7 +36,6 @@ export const Ghost = forwardRef<GhostRef, GhostProps>(
 	function Ghost(
 		{
 			text,
-			iconProps,
 			...props
 		},
 		ref,
@@ -71,10 +68,6 @@ export const Ghost = forwardRef<GhostRef, GhostProps>(
 					},
 					icon: mapIconColor[themeContext.colorScheme],
 				}}
-				iconProps={{
-					...iconProps,
-					style: [mapIconPLByText[`${!!text}`], iconProps?.style],
-				}}
 			/>
 		)
 
@@ -125,19 +118,6 @@ const
 			},
 		}),
 
-	style =
-		StyleSheet.create({
-			iconPL8: {
-				paddingLeft: Spacing.spacing_03,
-			},
-		}),
-
-	mapIconPLByText: Record<string, typeof style["iconPL8"] | null> =
-		{
-			false: null,
-			true: style.iconPL8,
-		},
-
 	mapIconColor: Record<ThemeContext["colorScheme"], Record<BaseColorState, string>> =
 		{
 			gray_10: {

packages/carbon-react-native/src/components/index.ts

@@ -1,10 +1,12 @@
 import * as Button from "./button"
 import * as Notification from "./notification"
+import * as TableToolbarButton from "./table-toolbar-button"
 import * as Toggle from "./toggle"
 
 export {
 	Button,
 	Notification,
+	TableToolbarButton,
 	Toggle,
 }
 
@@ -31,10 +33,16 @@ export * from "./radio-button-group"
 export * from "./radio-button-input"
 export * from "./switch"
 export * from "./table"
+export * from "./table-batch-action-bar"
+export * from "./table-batch-action-bar-button"
 export * from "./table-cell"
 export * from "./table-cell-header"
 export * from "./table-cell-icon"
 export * from "./table-cell-text"
+export * from "./table-header"
+export * from "./table-toolbar"
+export * from "./table-toolbar-button"
+export * from "./table-toolbar-switcher"
 export * from "./table-row"
 export * from "./table-row-header"
 export * from "./text"

packages/carbon-react-native/src/components/scroll-view/ScrollView.tsx

@@ -0,0 +1,62 @@
+import {
+	forwardRef,
+	useContext,
+} from "react"
+
+import {
+	ScrollView as ReactNativeScrollView,
+} from "react-native"
+
+import {
+	GlobalConfigContext,
+} from "../../_internal/contexts"
+
+import * as CarbonStyleSheet from "../../carbon-style-sheet"
+
+import type {
+	ScrollViewProps,
+} from "./ScrollViewProps"
+
+/**
+ * This component is a basic React Native `ScrollView` to solve
+ * RTL support for component level.
+ * 
+ * You may use this if your app provides custom localization options.
+ */
+export const ScrollView = forwardRef<ReactNativeScrollView, ScrollViewProps>(
+	function ScrollView(
+		{
+			dir: dirProp,
+			style,
+			contentContainerStyle,
+			...props
+		},
+		ref,
+	) {
+
+		const
+			globalConfigContext =
+				useContext(GlobalConfigContext),
+
+			dir =
+				dirProp ??
+				globalConfigContext.rtl ? "rtl" : "ltr"
+
+		return (
+			<ReactNativeScrollView
+				ref={ ref }
+				{ ...props }
+				dir={ dir }
+				style={ [
+					dir == "rtl" ? CarbonStyleSheet.g.rtl : undefined,
+					style,
+				] }
+				contentContainerStyle={ [
+					dir == "rtl" ? CarbonStyleSheet.g.rtl : undefined,
+					contentContainerStyle,
+				] }
+			/>
+		)
+
+	},
+) as unknown as typeof ReactNativeScrollView & ReactNativeScrollView

packages/carbon-react-native/src/components/scroll-view/ScrollViewProps.ts

@@ -0,0 +1,6 @@
+import type {
+	ScrollViewProps as Props,
+} from "react-native"
+
+export interface ScrollViewProps extends Props {
+}

packages/carbon-react-native/src/components/scroll-view/index.ts

@@ -0,0 +1,2 @@
+export * from "./ScrollView"
+export type * from "./ScrollViewProps"