@audira/carbon-react-native 1.0.4 → 1.0.5

package/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",

package/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,
 })

package/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={{

package/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,
 }

package/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) {
 

package/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 {
 }

package/src/carbon-style-sheet/color.ts

@@ -1,5 +1,5 @@
 // Generated
-// Fri, 03 Apr 2026 19:29:52 GMT
+// Sat, 04 Apr 2026 18:25:11 GMT
 
 export const background = "#f4f4f4|#000000"
 export const background_active = "rgba(141,141,141,0.5)|rgba(141,141,141,0.4)"

package/src/carbon-style-sheet/g/font.ts

@@ -1,5 +1,5 @@
 // Generated
-// Fri, 03 Apr 2026 19:29:52 GMT
+// Sat, 04 Apr 2026 18:25:11 GMT
 
 // To support cross platforms, we are mapping the `fontFamily` value to its PostScript name,
 // instead of the `fontWeight` number with a single font family name like in Web// Giving a `fontWeight` number will not work.

package/src/carbon-style-sheet/g/spacing.ts

@@ -1,5 +1,5 @@
 // Generated
-// Fri, 03 Apr 2026 19:29:52 GMT
+// Sat, 04 Apr 2026 18:25:11 GMT
 
 import {
 	StyleSheet,

package/src/carbon-style-sheet/g/typography.ts

@@ -1,5 +1,5 @@
 // Generated
-// Fri, 03 Apr 2026 19:29:52 GMT
+// Sat, 04 Apr 2026 18:25:11 GMT
 
 import {
 	StyleSheet,

package/src/carbon-style-sheet/g-object/font.ts

@@ -1,5 +1,5 @@
 // Generated
-// Fri, 03 Apr 2026 19:29:52 GMT
+// Sat, 04 Apr 2026 18:25:11 GMT
 
 // To support cross platforms, we are mapping the `fontFamily` value to its PostScript name,
 // instead of the `fontWeight` number with a single font family name like in Web// Giving a `fontWeight` number will not work.

package/src/carbon-style-sheet/g-object/spacing.ts

@@ -1,5 +1,5 @@
 // Generated
-// Fri, 03 Apr 2026 19:29:52 GMT
+// Sat, 04 Apr 2026 18:25:11 GMT
 
 import type {
 	ViewStyle,

package/src/carbon-style-sheet/g-object/typography.ts

@@ -1,5 +1,5 @@
 // Generated
-// Fri, 03 Apr 2026 19:29:52 GMT
+// Sat, 04 Apr 2026 18:25:11 GMT
 
 import type {
 	TextStyle,

package/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(
 		{

package/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: {

package/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: {

package/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"

package/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

package/src/components/scroll-view/ScrollViewProps.ts

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

package/src/components/scroll-view/index.ts

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

package/src/components/table/Table.tsx

@@ -2,16 +2,16 @@ import {
 	forwardRef,
 } from "react"
 
-import {
-	ScrollView,
-} from "react-native"
-
 import * as CarbonStyleSheet from "../../carbon-style-sheet"
 
 import {
 	Box,
 } from "../box/Box"
 
+import {
+	ScrollView,
+} from "../scroll-view/ScrollView"
+
 import type {
 	TableProps,
 } from "./TableProps"
@@ -28,8 +28,11 @@ export const Table = forwardRef<TableRef, TableProps>(
 	function Table(
 		{
 			rowSize = "large",
+			header,
+			footer,
+			horizontalScrollViewProps,
+			verticalScrollViewProps,
 			children,
-			style,
 			...props
 		},
 		ref,
@@ -44,23 +47,31 @@ export const Table = forwardRef<TableRef, TableProps>(
 				<Box
 					ref={ ref }
 					{ ...props }
-					style={ style }
 				>
+					{ header }
+
 					<ScrollView
-						horizontal
+						{ ...horizontalScrollViewProps }
+						horizontal={ horizontalScrollViewProps?.horizontal ?? true }
+						nestedScrollEnabled={ horizontalScrollViewProps?.nestedScrollEnabled ?? true }
 						contentContainerStyle={ [
 							CarbonStyleSheet.g.grow,
+							horizontalScrollViewProps?.contentContainerStyle,
 						] }
 					>
 						<ScrollView
+							{ ...verticalScrollViewProps }
 							style={ [
 								CarbonStyleSheet.g.flex_auto,
+								verticalScrollViewProps?.style,
 							] }
 							role="table"
 						>
 							{ children }
 						</ScrollView>
 					</ScrollView>
+
+					{ footer }
 				</Box>
 			</TableContext.Provider>
 		)

package/src/components/table/TableProps.ts

@@ -1,3 +1,7 @@
+import type {
+	ScrollViewProps,
+} from "react-native"
+
 import type {
 	BoxProps,
 } from "../box/BoxProps"
@@ -12,4 +16,24 @@ export interface TableProps extends BoxProps {
 	 * @see https://carbondesignsystem.com/components/data-table/style/#rows
 	 */
 	rowSize?: TableRowSize,
+	horizontalScrollViewProps?: Omit<
+		ScrollViewProps,
+		| "children"
+	>,
+	verticalScrollViewProps?: Omit<
+		ScrollViewProps,
+		| "children"
+	>,
+	/**
+	 * Add React node after start of the table element.
+	 * 
+	 * You may use this for `TableHeader`, `TableToolbar`, `TableBatchActionBar`, or all of them.
+	 */
+	header?: React.ReactNode,
+	/**
+	 * Add React node before end of the table element
+	 * 
+	 * You may use this for `Pagination` component.
+	 */
+	footer?: React.ReactNode,
 }

package/src/components/table/TableRef.ts

@@ -1,6 +1,6 @@
 import type {
-	View,
-} from "react-native"
+	BoxRef,
+} from "../box";
 
-export interface TableRef extends View {
+export interface TableRef extends BoxRef {
 }

package/src/components/table-batch-action-bar/TableBatchActionBar.tsx

@@ -0,0 +1,156 @@
+import {
+	forwardRef,
+	useContext,
+} from "react"
+
+import {
+	StyleSheet,
+	type ViewStyle,
+} from "react-native"
+
+import * as CarbonStyleSheet from "../../carbon-style-sheet"
+
+import {
+	Box,
+} from "../box/Box"
+
+import {
+	ScrollView,
+} from "../scroll-view/ScrollView"
+
+import {
+	TableContext,
+} from "../table/_TableContext"
+
+import {
+	Text,
+} from "../text/Text"
+
+import type {
+	TableBatchActionBarProps,
+} from "./TableBatchActionBarProps"
+
+import type {
+	TableBatchActionBarRef,
+} from "./TableBatchActionBarRef"
+
+import type {
+	TableBatchActionBarSize,
+} from "./TableBatchActionBarSize"
+
+import {
+	TableBatchActionBarContext,
+} from "./_TableBatchActionBarContext"
+
+export const TableBatchActionBar = forwardRef<TableBatchActionBarRef, TableBatchActionBarProps>(
+	function TableBatchActionBar(
+		{
+			size: sizeProp,
+			horizontal = true,
+			text,
+			textProps,
+			buttons,
+			style,
+			contentContainerStyle,
+			...props
+		},
+		ref,
+	) {
+
+		const
+			tableContext =
+				useContext(TableContext),
+
+			size =
+				sizeProp ?? tableContext.rowSize,
+
+			batchActionBarSize =
+				mapRowSizeToBatchActionBarSize[size]
+
+		return (
+			<TableBatchActionBarContext.Provider
+				value={{
+					size: batchActionBarSize,
+				}}
+			>
+				<ScrollView
+					ref={ ref }
+					{ ...props }
+					horizontal={ horizontal }
+					style={ [
+						carbonStyleSheet.tableBatchActionBar,
+						// if users provide size prop manually
+						// they will still get the correct size style
+						// the `large` and `small` from `TableBatchActionBarSize`
+						// are also used by `TableRowSize`
+						styleSheetSize[batchActionBarSize],
+						style,
+					] }
+					contentContainerStyle={ [
+						CarbonStyleSheet.g.flex_auto,
+						CarbonStyleSheet.g.flex_row,
+						CarbonStyleSheet.g.justify_between,
+						contentContainerStyle,
+					] }
+				>
+					<Text
+						{ ...textProps }
+						type="body_compact_01"
+						style={ [
+							CarbonStyleSheet.g.flex_auto,
+							CarbonStyleSheet.g.self_center,
+							CarbonStyleSheet.g.px_05,
+							carbonStyleSheet.text,
+							textProps?.style,
+						] }
+					>
+						{ text }
+					</Text>
+
+					{ !!buttons && (
+						<Box
+							style={ [
+								CarbonStyleSheet.g.flex_row,
+								CarbonStyleSheet.g.self_stretch,
+							] }
+						>
+							{ buttons }
+						</Box>
+					) }
+				</ScrollView>
+			</TableBatchActionBarContext.Provider>
+		)
+
+	},
+)
+
+const
+	styleSheetSize =
+		StyleSheet.create({
+			small: {
+				height: 32,
+			},
+			large: {
+				height: 48,
+			},
+		} as const satisfies Record<TableBatchActionBarSize, NonNullable<Pick<ViewStyle, "height">>>),
+
+	mapRowSizeToBatchActionBarSize =
+		{
+			extra_small: "small",
+			small: "small",
+			medium: "small",
+			large: "large",
+			extra_large: "large",
+		} as const satisfies Record<TableContext["rowSize"], TableBatchActionBarSize>,
+
+	carbonStyleSheet =
+		CarbonStyleSheet.create({
+			tableBatchActionBar: {
+				backgroundColor: CarbonStyleSheet.color.background_brand,
+			},
+			text: {
+				textWrap: "nowrap",
+				color: CarbonStyleSheet.color.text_on_color,
+			},
+		})

package/src/components/table-batch-action-bar/TableBatchActionBarProps.ts

@@ -0,0 +1,42 @@
+import type {
+	ScrollViewProps,
+} from "react-native"
+
+import type {
+	TextProps,
+} from "../text/TextProps"
+
+import type {
+	TableBatchActionBarSize,
+} from "./TableBatchActionBarSize"
+
+export interface TableBatchActionBarProps extends Omit<ScrollViewProps, "children"> {
+	/**
+	 * Based on the IBM spec, the `large` batch action bar is paired with the extra large and large row sizes.
+	 * The `small` batch action bar is paired with the small and extra small row sizes.
+	 * 
+	 * You may don't want to set the batch action bar size manually.
+	 * Prefer to opt `rowSize` in the `Table` prop instead,
+	 * and the batch action bar size will be adjusted automatically based on what the row size is.
+	 * 
+	 * @default "large"
+	 */
+	size?: TableBatchActionBarSize,
+	/**
+	 * Provide descriptive text after one or multiple items selected,
+	 * 
+	 * e.g. "0 items selected", "3 products selected", etc.
+	 */
+	text: string,
+	textProps?: Omit<
+		TextProps,
+		| "children"
+		| "type"
+	>,
+	/**
+	 * Provide one or multiple `<TableBatchActionBarButton>` in this prop.
+	 * 
+	 * To provide multiple buttons, you can start it with `<>` or `<Fragment>`
+	 */
+	buttons: React.ReactNode,
+}