@audira/carbon-react-native 1.0.5 → 1.0.6

package/src/components/table-row-collapsible/TableRowCollapsible.tsx

@@ -0,0 +1,415 @@
+import {
+	forwardRef,
+	useCallback,
+	useContext,
+	useEffect,
+	useImperativeHandle,
+	useMemo,
+	useRef,
+	useState,
+} from "react"
+
+import {
+	StyleSheet,
+	View,
+	type PressableProps,
+	type ViewProps,
+	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"
+
+import {
+	Collapsible,
+	type CollapsibleProps,
+} from "../collapsible"
+
+import {
+	LayerContext,
+} from "../layer"
+
+import {
+	TableContext,
+} from "../table/_TableContext"
+
+import {
+	TableCell,
+} from "../table-cell"
+
+import {
+	TableRow,
+	type TableRowInteractiveState,
+	type TableRowRef,
+} from "../table-row"
+
+import {
+	TableRowContext,
+} from "../table-row/_TableRowContext"
+
+import {
+	StyleSheetHeight as TableRowStyleSheetHeight,
+} from "../table-row/_style-sheet-height"
+
+import type {
+	TableRowCollapsibleProps,
+} from "./TableRowCollapsibleProps"
+
+import type {
+	TableRowCollapsibleRef,
+} from "./TableRowCollapsibleRef"
+
+import type {
+	TableRowCollapsibleRefBase,
+} from "./TableRowCollapsibleRefBase"
+
+import {
+	TableCellChevron,
+} from "./_table-cell-chevron"
+
+export const TableRowCollapsible = forwardRef<TableRowCollapsibleRef, TableRowCollapsibleProps>(
+	function TableRowCollapsible(
+		{
+			// +++ Picked CollapsibleProps +++
+			defaultOpen,
+			open: openProp,
+			motion,
+			onToggle,
+			onOpened,
+			onClosed,
+			// --- Picked CollapsibleProps ---
+			size: sizeProp,
+			content,
+			contentContainerProps,
+			collapsibleProps,
+			tableCellChevronProps,
+			onPressChevron,
+			children,
+			style,
+			...props
+		},
+		ref,
+	) {
+
+		const
+			tableContext =
+				useContext(TableContext),
+
+			tableRowRef =
+				useRef<TableRowRef>(null),
+
+			size =
+				useMemo(() => {
+					return sizeProp ?? tableContext.rowSize
+				}, [
+					sizeProp,
+					tableContext.rowSize,
+				]),
+
+			[openSelf, setOpenSelf] =
+				useState(!!defaultOpen),
+
+			controlled =
+				typeof openProp !== "undefined",
+
+			open =
+				controlled ? !!openProp : openSelf,
+
+			[expanded, setExpanded] =
+				useState(!!open)
+
+		const
+			onPress: PressableProps["onPress"] =
+				useCallback(event => {
+					if(tableCellChevronProps?.pressableProps?.onPress) {
+						tableCellChevronProps.pressableProps.onPress(event)
+					} else if(onPressChevron) {
+						onPressChevron(event)
+					}
+
+					if(!controlled) {
+						setOpenSelf(s => !s)
+					}
+				}, [
+					tableCellChevronProps?.pressableProps,
+					onPressChevron,
+					controlled,
+				]),
+
+			onClosedHandler: NonNullable<CollapsibleProps["onClosed"]> =
+				useCallback(() => {
+					onClosed?.()
+					setExpanded(false)
+				}, [
+					onClosed,
+				])
+
+		useImperativeHandle(ref, () => {
+			return Object.assign<TableRowRef, TableRowCollapsibleRefBase>(
+				tableRowRef.current ?? {} as TableRowRef,
+				{
+					get open() {
+						return open
+					},
+					setOpen(value) {
+						if(!controlled) {
+							setOpenSelf(value)
+						}
+					},
+				},
+			)
+		}, [
+			open,
+			controlled,
+		])
+
+		useEffect(() => {
+			if(open) {
+				setExpanded(true)
+			}
+		}, [
+			open,
+		])
+
+		return (
+			<TableRow
+				ref={ tableRowRef }
+				{ ...props }
+				style={ [
+					CarbonStyleSheet.g.flex_col, // override the row flex direction since TableRow is not directly the parent of children
+					CarbonStyleSheet.g.items_stretch,
+					expanded
+						? CarbonStyleSheet.g.h_auto
+						: undefined,
+					styleSheet.tableRowCollapsible,
+					style,
+				] }
+			>
+				<Box
+					style={ [
+						CarbonStyleSheet.g.flex_auto,
+						CarbonStyleSheet.g.flex_row,
+						size === "extra_large"
+							? CarbonStyleSheet.g.pt_05
+							: CarbonStyleSheet.g.items_center,
+						expanded ? TableRowStyleSheetHeight[size] : undefined,
+					] }
+				>
+					<TableCellChevron
+						{ ...tableCellChevronProps }
+						open={ open }
+						invisible={ !content }
+						pressableProps={{
+							...tableCellChevronProps?.pressableProps,
+							onPress,
+						}}
+					/>
+
+					{ children }
+				</Box>
+
+				{ !!content && (
+					<Collapsible
+						{ ...collapsibleProps }
+						role={ collapsibleProps?.role ?? "table" }
+						open={ open }
+						motion={ motion }
+						onToggle={ onToggle }
+						onOpened={ onOpened }
+						onClosed={ onClosedHandler }
+						contentContainerProps={{
+							...contentContainerProps,
+							role: contentContainerProps?.role ?? "row",
+							style: [
+								CarbonStyleSheet.g.flex_auto,
+								CarbonStyleSheet.g.flex_row,
+								CarbonStyleSheet.g.items_stretch,
+								TableRowStyleSheetHeight[size],
+								size === "extra_large"
+									? CarbonStyleSheet.g.pt_05
+									: CarbonStyleSheet.g.items_center,
+								collapsibleProps?.contentContainerProps?.style,
+							],
+						}}
+					>
+						<ContentContainerBorder
+							style={ [
+								CarbonStyleSheet.g.absolute,
+								styleSheet.contentContainerBorder,
+								{
+									left: tableCellChevronProps?.width ?? (36 + 16),
+								},
+							] }
+						/>
+
+						{ /* empty cell */ }
+						<TableCell
+							width={ tableCellChevronProps?.width ?? 36 }
+							style={ [
+								CarbonStyleSheet.g.flex_initial,
+							] }
+						/>
+
+						{/* <Box
+							{ ...contentContainerProps }
+							style={ [
+								CarbonStyleSheet.g.pe_05,
+								CarbonStyleSheet.g.flex_auto,
+								size === "extra_large"
+									? CarbonStyleSheet.g.pt_05
+									: CarbonStyleSheet.g.justify_center,
+								styleSheet.contentContainer,
+								contentContainerBorderStyleSheet[layerContext][interactiveState],
+								contentContainerProps?.style,
+							] }
+						> */}
+						{ content }
+						{/* </Box> */}
+					</Collapsible>
+				) }
+			</TableRow>
+		)
+
+	},
+)
+
+interface ContentContainerBorderProps extends Omit<ViewProps, "children"> {
+}
+
+function ContentContainerBorder({
+	style,
+	...props
+}: ContentContainerBorderProps) {
+
+	const
+		layerContext =
+			useContext(LayerContext),
+
+		tableRowContext =
+			useContext(TableRowContext)
+
+	return (
+		<View
+			{ ...props }
+			style={ [
+				getContentContainerBorderStyleSheet(
+					tableRowContext.interactiveState,
+					{
+						layer: layerContext,
+						hovered: tableRowContext.hovered,
+						selected: tableRowContext.selected,
+					},
+				),
+				style,
+			] }
+		/>
+	)
+
+}
+
+const
+	styleSheet =
+		StyleSheet.create({
+			tableRowCollapsible: {
+				paddingTop: 0,
+			},
+			contentContainerBorder: {
+				height: 1,
+				top: 0,
+				right: 0,
+			},
+			contentContainer: {
+				borderTopWidth: 1,
+				borderStyle: "solid",
+			},
+		}),
+
+	contentContainerBorderStyleSheet =
+		{
+			"1": CarbonStyleSheet.create({
+				normal: {
+					backgroundColor: CarbonStyleSheet.color.border_subtle_01,
+				},
+				hovered: {
+					backgroundColor: CarbonStyleSheet.color.border_subtle_01,
+				},
+				disabled: {
+					backgroundColor: CarbonStyleSheet.color.border_subtle_01,
+				},
+				selected: {
+					backgroundColor: CarbonStyleSheet.color.border_subtle_selected_01,
+				},
+				zebra: {
+					backgroundColor: CarbonStyleSheet.color.layer_accent_01,
+				},
+			}),
+			"2": CarbonStyleSheet.create({
+				normal: {
+					backgroundColor: CarbonStyleSheet.color.border_subtle_02,
+				},
+				hovered: {
+					backgroundColor: CarbonStyleSheet.color.border_subtle_02,
+				},
+				disabled: {
+					backgroundColor: CarbonStyleSheet.color.border_subtle_02,
+				},
+				selected: {
+					backgroundColor: CarbonStyleSheet.color.border_subtle_selected_02,
+				},
+				zebra: {
+					backgroundColor: CarbonStyleSheet.color.layer_accent_02,
+				},
+			}),
+			"3": CarbonStyleSheet.create({
+				normal: {
+					backgroundColor: CarbonStyleSheet.color.border_subtle_03,
+				},
+				hovered: {
+					backgroundColor: CarbonStyleSheet.color.border_subtle_03,
+				},
+				disabled: {
+					backgroundColor: CarbonStyleSheet.color.border_subtle_03,
+				},
+				selected: {
+					backgroundColor: CarbonStyleSheet.color.border_subtle_selected_03,
+				},
+				zebra: {
+					backgroundColor: CarbonStyleSheet.color.layer_accent_03,
+				},
+			}),
+		} as const satisfies {
+			[Layer in ColorLayerLevel]: Record<
+				| TableRowInteractiveState
+				| "hovered"
+				| "selected"
+				| "zebra",
+				ViewStyle
+			>
+		}
+
+function getContentContainerBorderStyleSheet(
+	interactiveState: TableRowInteractiveState,
+	modifier: {
+		layer: ColorLayerLevel,
+		selected: boolean,
+		hovered: boolean,
+		zebra?: boolean,
+	},
+) {
+	if(modifier.selected || modifier.hovered) {
+		return contentContainerBorderStyleSheet[modifier.layer].selected
+	}
+
+	if(modifier.zebra) {
+		return contentContainerBorderStyleSheet[modifier.layer].zebra
+	}
+
+	return contentContainerBorderStyleSheet[modifier.layer][interactiveState]
+}

package/src/components/table-row-collapsible/TableRowCollapsibleProps.ts

@@ -0,0 +1,44 @@
+import type {
+	PressableProps,
+} from "react-native"
+
+import type {
+	BoxProps,
+} from "../box/BoxProps"
+
+import type {
+	CollapsibleProps,
+} from "../collapsible/CollapsibleProps"
+
+import type {
+	TableRowProps,
+} from "../table-row/TableRowProps"
+
+import type {
+	TableCellChevronProps,
+} from "./_table-cell-chevron/TableCellChevronProps"
+
+type PickedCollapsibleProps = Pick<
+	CollapsibleProps,
+	| "open"
+	| "motion"
+	| "onToggle"
+	| "onClosed"
+	| "onOpened"
+>
+
+export interface TableRowCollapsibleProps extends TableRowProps, PickedCollapsibleProps {
+	defaultOpen?: boolean,
+	/**
+	 * Render your views as collapsible content
+	 */
+	content?: React.ReactNode,
+	contentContainerProps?: Omit<BoxProps, "children">,
+	collapsibleProps?: Omit<CollapsibleProps, keyof PickedCollapsibleProps>,
+	tableCellChevronProps?: TableCellChevronProps,
+	/**
+	 * This is shortcut of `tableCellChevronProps.pressableProps.onPress`.
+	 * The `tableCellChevronProps.pressableProps.onPress` takes precedence over this prop.
+	 */
+	onPressChevron?: PressableProps["onPress"],
+}

package/src/components/table-row-collapsible/TableRowCollapsibleRef.ts

@@ -0,0 +1,10 @@
+import type {
+	TableRowRef,
+} from "../table-row/TableRowRef"
+
+import type {
+	TableRowCollapsibleRefBase,
+} from "./TableRowCollapsibleRefBase"
+
+export interface TableRowCollapsibleRef extends TableRowRef, TableRowCollapsibleRefBase {
+}

package/src/components/table-row-collapsible/TableRowCollapsibleRefBase.ts

@@ -0,0 +1,10 @@
+import type {
+	CollapsibleRefBase,
+} from "../collapsible/CollapsibleRefBase"
+
+export interface TableRowCollapsibleRefBase extends CollapsibleRefBase {
+	/**
+	 * This method does nothing if `open` component prop is defined
+	 */
+	setOpen: (value: boolean | ((value: boolean) => boolean)) => void,
+}

package/src/components/table-row-collapsible/_table-cell-chevron/TableCellChevron.tsx

@@ -0,0 +1,140 @@
+import {
+	useContext,
+} from "react"
+
+import {
+	Pressable,
+	StyleSheet,
+} from "react-native"
+
+import {
+	Color,
+} from "@audira/carbon-react-native-elements"
+
+import {
+	AnimatedCollapsibleChevron,
+} from "../../../_internal/components"
+
+import * as CarbonStyleSheet from "../../../carbon-style-sheet"
+
+import {
+	ThemeContext,
+} from "../../../contexts"
+
+import type {
+	ThemeType,
+} from "../../../types"
+
+import {
+	TableCell,
+} from "../../table-cell"
+
+import {
+	TableRowContext,
+} from "../../table-row/_TableRowContext"
+
+import type {
+	TableCellChevronProps,
+} from "./TableCellChevronProps"
+
+export function TableCellChevron({
+	width = 36,
+	open,
+	invisible,
+	pressableProps,
+	style,
+	...props
+}: TableCellChevronProps) {
+
+	const
+		themeContext =
+			useContext(ThemeContext),
+
+		tableRowContext =
+			useContext(TableRowContext)
+
+	return (
+		<TableCell
+			{ ...props }
+			width={ width }
+			style={ [
+				styleSheet.tableCellChevron,
+				invisible ? styleSheet.tableCellChevronInvisible : undefined,
+				CarbonStyleSheet.g.flex_initial,
+				style,
+			] }
+		>
+			<Pressable
+				{ ...pressableProps }
+				style={ [
+					styleSheet.pressable,
+					CarbonStyleSheet.g.ms_03,
+					CarbonStyleSheet.g.items_center,
+				] }
+			>
+				{ !invisible && (
+					<AnimatedCollapsibleChevron
+						color={ resolveIconColor(
+							tableRowContext.interactiveState,
+							{
+								colorScheme: themeContext.colorScheme,
+								hovered: tableRowContext.hovered,
+								selected: tableRowContext.selected,
+							},
+						) }
+						open={ open }
+						size={ 16 }
+					/>
+				) }
+			</Pressable>
+		</TableCell>
+	)
+
+}
+
+const
+	styleSheet =
+		StyleSheet.create({
+			tableCellChevron: {
+				paddingHorizontal: 0,
+			},
+			tableCellChevronInvisible: {
+				opacity: 0,
+			},
+			pressable: {
+				width: 32,
+			},
+		}),
+
+	mapIconColor =
+		{
+			normal: {
+				gray_10: Color.Token.gray_10.icon_secondary,
+				gray_100: Color.Token.gray_100.icon_secondary,
+			},
+			disabled: {
+				gray_10: Color.Token.gray_10.icon_disabled,
+				gray_100: Color.Token.gray_100.icon_disabled,
+			},
+			selected: {
+				gray_10: Color.Token.gray_10.icon_primary,
+				gray_100: Color.Token.gray_100.icon_primary,
+			},
+		} as const satisfies Record<
+			TableRowContext["interactiveState"] | "selected",
+			Record<ThemeType.ColorScheme, string>
+		>
+
+function resolveIconColor(
+	interactiveState: TableRowContext["interactiveState"],
+	modifier: {
+		colorScheme: ThemeContext["colorScheme"],
+		hovered: boolean,
+		selected: boolean,
+	},
+) {
+	if(modifier.hovered || modifier.selected) {
+		return mapIconColor.selected[modifier.colorScheme]
+	}
+	return mapIconColor[interactiveState][modifier.colorScheme]
+}

package/src/components/table-row-collapsible/_table-cell-chevron/TableCellChevronProps.ts

@@ -0,0 +1,13 @@
+import type {
+	PressableProps,
+} from "react-native"
+
+import type {
+	TableCellProps,
+} from "../../table-cell/TableCellProps"
+
+export interface TableCellChevronProps extends Omit<TableCellProps, "children"> {
+	open: boolean,
+	invisible: boolean,
+	pressableProps?: Omit<PressableProps, "children" | "style">,
+}

package/src/components/table-row-collapsible/_table-cell-chevron/index.ts

@@ -0,0 +1,2 @@
+export * from "./TableCellChevron"
+export type * from "./TableCellChevronProps"

package/src/components/table-row-collapsible/index.ts

@@ -0,0 +1,3 @@
+export * from "./TableRowCollapsible"
+export type * from "./TableRowCollapsibleProps"
+export type * from "./TableRowCollapsibleRef"

package/src/components/toggle/base/Base.tsx

@@ -56,8 +56,8 @@ import type {
 } from "./BaseRef"
 
 import type {
-	RefBase,
-} from "./_RefBase"
+	BaseRefBase,
+} from "./BaseRefBase"
 
 export const Base = forwardRef<BaseRef, BaseProps>(
 	function Base(
@@ -101,7 +101,7 @@ export const Base = forwardRef<BaseRef, BaseProps>(
 				])
 
 		useImperativeHandle(forwardedRef, () => {
-			return Object.assign<View, RefBase>(
+			return Object.assign<View, BaseRefBase>(
 				(viewRef.current ?? {
 				}) as View,
 				{

package/src/components/toggle/base/BaseRef.ts

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

package/src/components/toggle/base/BaseRefBase.ts

@@ -0,0 +1,7 @@
+import type {
+	SwitchRefBase,
+} from "../../switch/SwitchRefBase"
+
+// weird name
+export interface BaseRefBase extends SwitchRefBase {
+}

package/src/components/toggle/base/index.ts

@@ -1,3 +1,4 @@
 export * from "./Base"
-export * from "./BaseProps"
-export * from "./BaseRef"
+export type * from "./BaseProps"
+export type * from "./BaseRef"
+export type * from "./BaseRefBase"

package/lib/commonjs/components/accordion/_ItemRefBase.js

@@ -1,2 +0,0 @@
-"use strict";
-//# sourceMappingURL=_ItemRefBase.js.map

package/lib/commonjs/components/accordion/_ItemRefBase.js.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["components/accordion/_ItemRefBase.ts"],"mappings":"","ignoreList":[]}

package/lib/commonjs/components/accordion/_chevron/Chevron.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_react","require","_reactNative","_chevronDown","_interopRequireDefault","_motion","_jsxRuntime","e","__esModule","default","AnimatedSvgChevronDown","RNAnimated","createAnimatedComponent","ChevronDown","Chevron","open","color","size","style","isMounted","useRef","rotateZ","Value","useEffect","current","timing","toValue","duration","Motion","toOpen","easing","useNativeDriver","start","toClose","jsx","fill","width","height","transform","interpolate","inputRange","outputRange"],"sourceRoot":"../../../../../src","sources":["components/accordion/_chevron/Chevron.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAKA,IAAAC,YAAA,GAAAD,OAAA;AAKA,IAAAE,YAAA,GAAAC,sBAAA,CAAAH,OAAA;AAEA,IAAAI,OAAA,GAAAJ,OAAA;AAEmB,IAAAK,WAAA,GAAAL,OAAA;AAAA,SAAAG,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAMnB,MACCG,sBAAsB,GACrBC,qBAAU,CAACC,uBAAuB,CAACC,oBAAW,CAAC;AAE1C,SAASC,OAAOA,CAAC;EACvBC,IAAI;EACJC,KAAK;EACLC,IAAI;EACJC;AACa,CAAC,EAAE;EAEhB,MACCC,SAAS,GACR,IAAAC,aAAM,EAAC,KAAK,CAAC;IAEd;AACF;AACA;AACA;AACA;AACA;IACEC,OAAO,GACN,IAAAD,aAAM,EACL,IAAIT,qBAAU,CAACW,KAAK,CAACP,IAAI,GAAG,CAAC,GAAG,CAAC,CAClC,CAAC;EAEH,IAAAQ,gBAAS,EAAC,MAAM;IACf,IAAGJ,SAAS,CAACK,OAAO,EAAE;MACrB,IAAGT,IAAI,EAAE;QACRJ,qBAAU,CAACc,MAAM,CAChBJ,OAAO,CAACG,OAAO,EACf;UACCE,OAAO,EAAE,CAAC;UACVC,QAAQ,EAAEC,cAAM,CAACC,MAAM,CAACF,QAAQ;UAChCG,MAAM,EAAEF,cAAM,CAACC,MAAM,CAACC,MAAwB;UAC9CC,eAAe,EAAE;QAClB,CACD,CAAC,CAACC,KAAK,CAAC,CAAC;MACV,CAAC,MAAM;QACNrB,qBAAU,CAACc,MAAM,CAChBJ,OAAO,CAACG,OAAO,EACf;UACCE,OAAO,EAAE,CAAC;UACVC,QAAQ,EAAEC,cAAM,CAACK,OAAO,CAACN,QAAQ;UACjCG,MAAM,EAAEF,cAAM,CAACK,OAAO,CAACH,MAAwB;UAC/CC,eAAe,EAAE;QAClB,CACD,CAAC,CAACC,KAAK,CAAC,CAAC;MACV;IACD,CAAC,MAAM;MACNb,SAAS,CAACK,OAAO,GAAG,IAAI;IACzB;EACD,CAAC,EAAE,CACFT,IAAI,EACJM,OAAO,CACP,CAAC;EAEF,oBACC,IAAAf,WAAA,CAAA4B,GAAA,EAACxB,sBAAsB;IACtByB,IAAI,EAAGnB,KAAO;IACdoB,KAAK,EAAGnB,IAAM;IACdoB,MAAM,EAAGpB,IAAM;IACfC,KAAK,EAAG,CACP;IACA;MACCoB,SAAS,EAAE,CAAC;QACXjB,OAAO,EAAEA,OAAO,CAACG,OAAO,CAACe,WAAW,CAAC;UACpCC,UAAU,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;UAClBC,WAAW,EAAE,CAAC,MAAM,EAAE,QAAQ;QAC/B,CAAC;MACF,CAAC;IACF,CAAC,EACD;IACAvB,KAAK;EACH,CACH,CAAC;AAGJ","ignoreList":[]}