@audira/carbon-react-native 1.0.4 → 1.0.6

package/src/components/radio-button/index.ts

@@ -1,3 +1,4 @@
 export * from "./RadioButton"
-export * from "./RadioButtonProps"
-export * from "./RadioButtonRef"
+export type * from "./RadioButtonProps"
+export type * from "./RadioButtonRef"
+export type * from "./RadioButtonRefBase"

package/src/components/radio-button-input/RadioButtonInput.tsx

@@ -35,8 +35,8 @@ import type {
 } from "./RadioButtonInputRef"
 
 import type {
-	RefBase,
-} from "./_RefBase"
+	RadioButtonInputRefBase,
+} from "./RadioButtonInputRefBase"
 
 export const RadioButtonInput = forwardRef<RadioButtonInputRef, RadioButtonInputProps>(
 	function RadioButtonInput(
@@ -125,7 +125,7 @@ export const RadioButtonInput = forwardRef<RadioButtonInputRef, RadioButtonInput
 		])
 
 		useImperativeHandle(forwardedRef, () => {
-			return Object.assign<View, RefBase>(
+			return Object.assign<View, RadioButtonInputRefBase>(
 				(viewRef.current ?? {
 				}) as View,
 				{

package/src/components/radio-button-input/RadioButtonInputRef.ts

@@ -3,8 +3,8 @@ import type {
 } from "react-native"
 
 import type {
-	RefBase,
-} from "./_RefBase"
+	RadioButtonInputRefBase,
+} from "./RadioButtonInputRefBase"
 
-export interface RadioButtonInputRef extends View, RefBase {
+export interface RadioButtonInputRef extends View, RadioButtonInputRefBase {
 }

package/src/components/radio-button-input/RadioButtonInputRefBase.ts

@@ -0,0 +1,10 @@
+export  interface RadioButtonInputRefBase {
+	/**
+	 * The current checked value.
+	 */
+	readonly checked: boolean,
+	/**
+	 * This method does nothing if `checked` component prop is defined
+	 */
+	setChecked: (checked: boolean | ((checked: boolean) => boolean)) => void,
+}

package/src/components/radio-button-input/index.ts

@@ -1,4 +1,5 @@
 export * from "./RadioButtonInput"
-export * from "./RadioButtonInputInteractiveState"
-export * from "./RadioButtonInputProps"
-export * from "./RadioButtonInputRef"
+export type * from "./RadioButtonInputInteractiveState"
+export type * from "./RadioButtonInputProps"
+export type * from "./RadioButtonInputRef"
+export type * from "./RadioButtonInputRefBase"

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/switch/Switch.tsx

@@ -44,6 +44,10 @@ import type {
 	SwitchRef,
 } from "./SwitchRef"
 
+import type {
+	SwitchRefBase,
+} from "./SwitchRefBase"
+
 import type {
 	SwitchSize,
 } from "./SwitchSize"
@@ -52,10 +56,6 @@ import type {
 	SwitchState,
 } from "./SwitchState"
 
-import type {
-	RefBase,
-} from "./_RefBase"
-
 export const Switch = forwardRef<SwitchRef, SwitchProps>(
 	function(
 		{
@@ -238,7 +238,7 @@ export const Switch = forwardRef<SwitchRef, SwitchProps>(
 		])
 
 		useImperativeHandle(forwardedRef, () => {
-			return Object.assign<View, RefBase>(
+			return Object.assign<View, SwitchRefBase>(
 				(viewRef.current ?? {
 				}) as View,
 				{
@@ -249,10 +249,11 @@ export const Switch = forwardRef<SwitchRef, SwitchProps>(
 						if(!controlled) {
 							ref.current.onChangeEffect = true
 							if(typeof valueParam === "boolean") {
-								setValueSelf(valueParam)
+								ref.current.value = valueParam
 							} else {
-								setValueSelf(valueParam(ref.current.value))
+								ref.current.value = valueParam(ref.current.value)
 							}
+							setValueSelf(ref.current.value)
 						}
 					},
 				},

package/src/components/switch/SwitchRef.ts

@@ -3,8 +3,8 @@ import type {
 } from "react-native"
 
 import type {
-	RefBase,
-} from "./_RefBase"
+	SwitchRefBase,
+} from "./SwitchRefBase"
 
-export interface SwitchRef extends View, RefBase {
+export interface SwitchRef extends View, SwitchRefBase {
 }

package/src/components/switch/SwitchRefBase.ts

@@ -0,0 +1,10 @@
+export interface SwitchRefBase {
+	/**
+	 * The current value.
+	 */
+	readonly value: boolean,
+	/**
+	 * This method does nothing if `value` component prop is defined
+	 */
+	setValue: (value: boolean | ((currentValue: boolean) => boolean)) => void,
+}

package/src/components/switch/index.ts

@@ -1,5 +1,6 @@
 export * from "./Switch"
-export * from "./SwitchProps"
-export * from "./SwitchRef"
-export * from "./SwitchSize"
-export * from "./SwitchState"
+export type * from "./SwitchProps"
+export type * from "./SwitchRef"
+export type * from "./SwitchRefBase"
+export type * from "./SwitchSize"
+export type * from "./SwitchState"

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,
+}

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

@@ -0,0 +1,6 @@
+import type {
+	ScrollView,
+} from "react-native"
+
+export interface TableBatchActionBarRef extends ScrollView {
+}

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

@@ -0,0 +1,3 @@
+export type TableBatchActionBarSize =
+	| "large"
+	| "small"

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

@@ -0,0 +1,15 @@
+import {
+	createContext,
+} from "react"
+
+import type {
+	TableBatchActionBarSize,
+} from "./TableBatchActionBarSize"
+
+export interface TableBatchActionBarContext {
+	size: TableBatchActionBarSize,
+}
+
+export const TableBatchActionBarContext = createContext<TableBatchActionBarContext>({
+	size: "large",
+})

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

@@ -0,0 +1,4 @@
+export * from "./TableBatchActionBar"
+export type * from "./TableBatchActionBarProps"
+export type * from "./TableBatchActionBarRef"
+export type * from "./TableBatchActionBarSize"

package/src/components/table-batch-action-bar-button/TableBatchActionBarButton.tsx

@@ -0,0 +1,74 @@
+import {
+	forwardRef,
+	useContext,
+} from "react"
+
+import * as CarbonStyleSheet from "../../carbon-style-sheet"
+
+import {
+	Primary as ButtonPrimary,
+	type PrimaryProps as ButtonPrimaryProps,
+} from "../button/primary"
+
+import type {
+	TableBatchActionBarSize,
+} from "../table-batch-action-bar/TableBatchActionBarSize"
+
+import {
+	TableBatchActionBarContext,
+} from "../table-batch-action-bar/_TableBatchActionBarContext"
+
+import type {
+	TableBatchActionBarButtonProps,
+} from "./TableBatchActionBarButtonProps"
+
+import type {
+	TableBatchActionBarButtonRef,
+} from "./TableBatchActionBarButtonRef"
+
+export const TableBatchActionBarButton = forwardRef<TableBatchActionBarButtonRef, TableBatchActionBarButtonProps>(
+	function TableBatchActionBarButton(
+		{
+			Icon,
+			iconProps,
+			style,
+			...props
+		},
+		ref,
+	) {
+
+		const
+			tableBatchActionBarContext =
+				useContext(TableBatchActionBarContext)
+
+		return (
+			<ButtonPrimary
+				ref={ ref }
+				{ ...props }
+				size={ mapBatchActionBarSizeToButtonSize[tableBatchActionBarContext.size] }
+				Icon={ Icon }
+				iconProps={{
+					...iconProps,
+					style: [
+						CarbonStyleSheet.g.ms_03, // override the gap between text and icon
+						iconProps?.style,
+					],
+				}}
+				style={ [
+					Icon
+						? undefined
+						: CarbonStyleSheet.g.pe_05,
+					style,
+				] }
+			/>
+		)
+
+	},
+)
+
+const
+	mapBatchActionBarSizeToButtonSize =
+		{
+			small: "small",
+			large: "large_productive",
+		} as const satisfies Record<TableBatchActionBarSize, NonNullable<ButtonPrimaryProps["size"]>>

package/src/components/table-batch-action-bar-button/TableBatchActionBarButtonProps.ts

@@ -0,0 +1,6 @@
+import type {
+	PrimaryProps,
+} from "../button/primary/PrimaryProps"
+
+export interface TableBatchActionBarButtonProps extends Omit<PrimaryProps, "size"> {
+}

package/src/components/table-batch-action-bar-button/TableBatchActionBarButtonRef.ts

@@ -0,0 +1,6 @@
+import type {
+	PrimaryRef,
+} from "../button/primary/PrimaryRef"
+
+export interface TableBatchActionBarButtonRef extends PrimaryRef {
+}

package/src/components/table-batch-action-bar-button/index.ts

@@ -0,0 +1,3 @@
+export * from "./TableBatchActionBarButton"
+export type * from "./TableBatchActionBarButtonProps"
+export type * from "./TableBatchActionBarButtonRef"

package/src/components/table-cell/TableCell.tsx

@@ -45,6 +45,7 @@ export const TableCell = forwardRef<TableCellRef, TableCellProps>(
 			text,
 			textProps,
 			width,
+			invisible,
 			role = "cell",
 			accessibilityLabel,
 			style,
@@ -66,6 +67,7 @@ export const TableCell = forwardRef<TableCellRef, TableCellProps>(
 				style={ [
 					CarbonStyleSheet.g.flex_auto,
 					CarbonStyleSheet.g.px_05,
+					invisible ? CarbonStyleSheet.g.invisible : undefined,
 
 					tableRowHeaderContext.inRowHeader
 						? tableRowHeaderContext.size == "extra_large"
@@ -75,6 +77,7 @@ export const TableCell = forwardRef<TableCellRef, TableCellProps>(
 
 					typeof width === "number" ? {
 						width,
+						minWidth: width,
 					} : undefined,
 					style,
 				] }