@audira/carbon-react-native 1.0.4 → 1.0.5

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-header/_sort-icon/SortIcon.tsx

@@ -8,6 +8,7 @@ import {
 import {
 	Animated,
 	Easing,
+	Platform,
 } from "react-native"
 
 import {
@@ -58,7 +59,7 @@ export const SortIcon = forwardRef<SortIconRef, SortIconProps>(
 						{
 							toValue: 0,
 							duration: 0,
-							useNativeDriver: false,
+							useNativeDriver: Platform.OS != "web",
 						},
 					)
 					.start()
@@ -75,7 +76,7 @@ export const SortIcon = forwardRef<SortIconRef, SortIconProps>(
 								Motion.Easing.standard.productive.x2,
 								Motion.Easing.standard.productive.y2,
 							),
-							useNativeDriver: false,
+							useNativeDriver: Platform.OS != "web",
 						},
 					)
 					.start()
@@ -99,7 +100,7 @@ export const SortIcon = forwardRef<SortIconRef, SortIconProps>(
 									Motion.Easing.entrance.productive.x2,
 									Motion.Easing.entrance.productive.y2,
 								),
-								useNativeDriver: true,
+								useNativeDriver: Platform.OS != "web",
 							},
 						)
 						.start()

package/src/components/table-header/TableHeader.tsx

@@ -0,0 +1,110 @@
+import {
+	forwardRef,
+	useContext,
+} from "react"
+
+import type {
+	TextStyle,
+	ViewStyle,
+} from "react-native"
+
+import type {
+	ColorLayerLevel,
+} from "@audira/carbon-react-native-elements"
+
+import * as CarbonStyleSheet from "../../carbon-style-sheet"
+
+import {
+	Box,
+} from "../box/Box"
+
+import {
+	LayerContext,
+} from "../layer/LayerContext"
+
+import {
+	Text,
+} from "../text/Text"
+
+import type {
+	TableHeaderProps,
+} from "./TableHeaderProps"
+
+import type {
+	TableHeaderRef,
+} from "./TableHeaderRef"
+
+export const TableHeader = forwardRef<TableHeaderRef, TableHeaderProps>(
+	function TableHeader(
+		{
+			title,
+			description,
+			titleProps,
+			descriptionProps,
+			style,
+			...props
+		},
+		ref,
+	) {
+
+		const
+			layerContext =
+				useContext(LayerContext)
+
+		return (
+			<Box
+				ref={ ref }
+				{ ...props }
+				style={ [
+					CarbonStyleSheet.g.pt_05,
+					CarbonStyleSheet.g.pb_06,
+					CarbonStyleSheet.g.px_05,
+					carbonStyleSheet[`bg_${layerContext}`],
+					style,
+				] }
+			>
+				<Text
+					{ ...titleProps }
+					type="heading_03"
+				>
+					{ title }
+				</Text>
+
+				{ !!description && (
+					<Text
+						{ ...descriptionProps }
+						type="body_compact_01"
+						style={ [
+							carbonStyleSheet.description,
+							descriptionProps?.style,
+						] }
+					>
+						{ description }
+					</Text>
+				) }
+			</Box>
+		)
+
+	},
+)
+
+const
+	carbonStyleSheet =
+		CarbonStyleSheet.create({
+			bg_1: {
+				backgroundColor: CarbonStyleSheet.color.layer_01,
+			},
+			bg_2: {
+				backgroundColor: CarbonStyleSheet.color.layer_02,
+			},
+			bg_3: {
+				backgroundColor: CarbonStyleSheet.color.layer_03,
+			},
+			description: {
+				color: CarbonStyleSheet.color.text_secondary,
+			},
+		} as const satisfies {
+			[Layer in `bg_${ColorLayerLevel}`]: Pick<ViewStyle, "backgroundColor">
+		} & {
+			description: Pick<TextStyle, "color">,
+		})

package/src/components/table-header/TableHeaderProps.ts

@@ -0,0 +1,22 @@
+import type {
+	BoxProps,
+} from "../box/BoxProps"
+
+import type {
+	TextProps,
+} from "../text/TextProps"
+
+export interface TableHeaderProps extends Omit<BoxProps, "children"> {
+	title: string,
+	description?: string,
+	titleProps?: Omit<
+		TextProps,
+		| "type"
+		| "children"
+	>,
+	descriptionProps?: Omit<
+		TextProps,
+		| "type"
+		| "children"
+	>,
+}

package/src/components/table-header/TableHeaderRef.ts

@@ -0,0 +1,6 @@
+import type {
+	BoxRef,
+} from "../box/BoxRef"
+
+export interface TableHeaderRef extends BoxRef {
+}

package/src/components/table-header/index.ts

@@ -0,0 +1,3 @@
+export * from "./TableHeader"
+export type * from "./TableHeaderProps"
+export type * from "./TableHeaderRef"

package/src/components/table-row/TableRowProps.ts

@@ -13,6 +13,9 @@ import type {
 
 export interface TableRowProps extends Omit<PressableProps, "style"> {
 	/**
+	 * You may don't want to set the row size each row individually.
+	 * Prefer to opt `rowSize` in the `Table` prop instead.
+	 * 
 	 * @default "large"
 	 * @see https://carbondesignsystem.com/components/data-table/style/#rows
 	 */

package/src/components/table-toolbar/TableToolbar.tsx

@@ -0,0 +1,165 @@
+import {
+	forwardRef,
+	useContext,
+} from "react"
+
+import {
+	StyleSheet,
+	type ViewStyle,
+} from "react-native"
+
+import type {
+	ColorLayerLevel,
+} from "@audira/carbon-react-native-elements"
+
+import * as CarbonStyleSheet from "../../carbon-style-sheet"
+
+import {
+	Box,
+} from "../box/Box"
+
+import {
+	LayerContext,
+} from "../layer/LayerContext"
+
+import {
+	ScrollView,
+} from "../scroll-view/ScrollView"
+
+import {
+	TableContext,
+} from "../table/_TableContext"
+
+import type {
+	TableToolbarProps,
+} from "./TableToolbarProps"
+
+import type {
+	TableToolbarRef,
+} from "./TableToolbarRef"
+
+import type {
+	TableToolbarSize,
+} from "./TableToolbarSize"
+
+import {
+	TableToolbarContext,
+} from "./_TableToolbarContext"
+
+export const TableToolbar = forwardRef<TableToolbarRef, TableToolbarProps>(
+	function TableToolbar(
+		{
+			size: sizeProp,
+			buttons,
+			children,
+			horizontal = true,
+			role = "group",
+			"aria-label": ariaLabel = "table toolbar",
+			style,
+			contentContainerStyle,
+			...props
+		},
+		ref,
+	) {
+
+		const
+			layerContext =
+				useContext(LayerContext),
+
+			tableContext =
+				useContext(TableContext),
+
+			size =
+				sizeProp ?? tableContext.rowSize
+
+		return (
+			<TableToolbarContext.Provider
+				value={{
+					size: sizeProp ?? mapRowSizeToToolbarSize[tableContext.rowSize],
+				}}
+			>
+				<ScrollView
+					ref={ ref }
+					{ ...props }
+					role={ role }
+					aria-label={ ariaLabel }
+					horizontal={ horizontal }
+					style={ [
+						// if users provide size prop manually
+						// they will still get the correct size style
+						// the `large` and `small` from `TableToolbarSize`
+						// are also used by `TableRowSize`
+						styleSheetSize[
+							mapRowSizeToToolbarSize[size]
+						],
+
+						styleSheetBGPerLayer[`bg_${layerContext}`],
+
+						style,
+					] }
+					contentContainerStyle={ [
+						CarbonStyleSheet.g.flex_row,
+						CarbonStyleSheet.g.flex_auto,
+						CarbonStyleSheet.g.justify_between,
+						contentContainerStyle,
+					] }
+				>
+					<Box
+						style={ [
+							CarbonStyleSheet.g.flex_auto,
+						] }
+					>
+						{ children }
+					</Box>
+
+					{ !!buttons && (
+						<Box
+							style={ [
+								CarbonStyleSheet.g.flex_row,
+								CarbonStyleSheet.g.self_stretch,
+							] }
+						>
+							{ buttons }
+						</Box>
+					) }
+				</ScrollView>
+			</TableToolbarContext.Provider>
+		)
+
+	},
+)
+
+const
+	styleSheetSize =
+		StyleSheet.create({
+			small: {
+				height: 32,
+			},
+			large: {
+				height: 48,
+			},
+		} as const satisfies Record<TableToolbarSize, NonNullable<Pick<ViewStyle, "height">>>),
+
+	mapRowSizeToToolbarSize =
+		{
+			extra_small: "small",
+			small: "small",
+			medium: "small",
+			large: "large",
+			extra_large: "large",
+		} as const satisfies Record<TableContext["rowSize"], TableToolbarSize>,
+
+	styleSheetBGPerLayer =
+		CarbonStyleSheet.create({
+			bg_1: {
+				backgroundColor: CarbonStyleSheet.color.layer_01,
+			},
+			bg_2: {
+				backgroundColor: CarbonStyleSheet.color.layer_02,
+			},
+			bg_3: {
+				backgroundColor: CarbonStyleSheet.color.layer_03,
+			},
+		} as const satisfies {
+			[Name in `bg_${ColorLayerLevel}`]: NonNullable<Pick<ViewStyle, "backgroundColor">>
+		})

package/src/components/table-toolbar/TableToolbarProps.ts

@@ -0,0 +1,27 @@
+import type {
+	ScrollViewProps,
+} from "react-native"
+
+import type {
+	TableToolbarSize,
+} from "./TableToolbarSize"
+
+export interface TableToolbarProps extends ScrollViewProps {
+	/**
+	 * Based on the IBM spec, the `large` toolbar is paired with the extra large and large row sizes.
+	 * The `small` toolbar is paired with the small and extra small row sizes.
+	 * 
+	 * You may don't want to set the toolbar size manually.
+	 * Prefer to opt `rowSize` in the `Table` prop instead,
+	 * and the toolbar size will be adjusted automatically based on what the row size is.
+	 * 
+	 * @default "large"
+	 */
+	size?: TableToolbarSize,
+	/**
+	 * Provide one or multiple `<TableToolbarButton>` in this prop.
+	 * 
+	 * To provide multiple buttons, you can start it with `<>` or `<Fragment>`
+	 */
+	buttons: React.ReactNode,
+}

package/src/components/table-toolbar/TableToolbarRef.ts

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

package/src/components/table-toolbar/TableToolbarSize.ts

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

package/src/components/table-toolbar/_TableToolbarContext.ts

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

package/src/components/table-toolbar/index.ts

@@ -0,0 +1,4 @@
+export * from "./TableToolbar"
+export type * from "./TableToolbarProps"
+export type * from "./TableToolbarRef"
+export type * from "./TableToolbarSize"

package/src/components/table-toolbar-button/_useSize.tsx

@@ -0,0 +1,28 @@
+import {
+	useContext,
+} from "react"
+
+import type {
+	Size,
+} from "../button/Size"
+
+import {
+	TableToolbarContext,
+} from "../table-toolbar/_TableToolbarContext"
+
+export function useSize(): Size {
+
+	const
+		tableToolbarContext =
+			useContext(TableToolbarContext)
+
+	return mapToolbarSizeToButtonSize[tableToolbarContext.size]
+
+}
+
+const
+	mapToolbarSizeToButtonSize =
+		{
+			small: "small",
+			large: "large_productive",
+		} as const satisfies Record<TableToolbarContext["size"], Size>

package/src/components/table-toolbar-button/ghost/Ghost.tsx

@@ -0,0 +1,43 @@
+import {
+	forwardRef,
+} from "react"
+
+import {
+	Ghost as Button,
+} from "../../button/ghost/Ghost"
+
+import {
+	useSize,
+} from "../_useSize"
+
+import type {
+	GhostProps,
+} from "./GhostProps"
+
+import type {
+	GhostRef,
+} from "./GhostRef"
+
+export const Ghost = forwardRef<GhostRef, GhostProps>(
+	function Ghost(
+		{
+			size: sizeProp,
+			...props
+		},
+		ref,
+	) {
+
+		const
+			size =
+				useSize()
+
+		return (
+			<Button
+				ref={ ref }
+				{ ...props }
+				size={ sizeProp ?? size }
+			/>
+		)
+
+	},
+)

package/src/components/table-toolbar-button/ghost/GhostProps.ts

@@ -0,0 +1,6 @@
+import type {
+	PrimaryProps as Props,
+} from "../../button/primary/PrimaryProps"
+
+export interface GhostProps extends Props {
+}

package/src/components/table-toolbar-button/ghost/GhostRef.ts

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

package/src/components/table-toolbar-button/ghost/index.ts

@@ -0,0 +1,3 @@
+export * from "./Ghost"
+export type * from "./GhostProps"
+export type * from "./GhostRef"

package/src/components/table-toolbar-button/ghost-icon/GhostIcon.tsx

@@ -0,0 +1,43 @@
+import {
+	forwardRef,
+} from "react"
+
+import {
+	GhostIcon as Button,
+} from "../../button/ghost-icon/GhostIcon"
+
+import {
+	useSize,
+} from "../_useSize"
+
+import type {
+	GhostIconProps,
+} from "./GhostIconProps"
+
+import type {
+	GhostIconRef,
+} from "./GhostIconRef"
+
+export const GhostIcon = forwardRef<GhostIconRef, GhostIconProps>(
+	function GhostIcon(
+		{
+			size: sizeProp,
+			...props
+		},
+		ref,
+	) {
+
+		const
+			size =
+				useSize()
+
+		return (
+			<Button
+				ref={ ref }
+				{ ...props }
+				size={ sizeProp ?? size }
+			/>
+		)
+
+	},
+)

package/src/components/table-toolbar-button/ghost-icon/GhostIconProps.ts

@@ -0,0 +1,6 @@
+import type {
+	PrimaryProps as Props,
+} from "../../button/primary/PrimaryProps"
+
+export interface GhostIconProps extends Props {
+}