@audira/carbon-react-native 1.0.5 → 1.0.6

package/src/components/checkbox/CheckboxRef.ts

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

package/src/components/checkbox/CheckboxRefBase.ts

@@ -0,0 +1,7 @@
+import type {
+	CheckboxInputRefBase,
+} from "../checkbox-input/CheckboxInputRefBase"
+
+export interface CheckboxRefBase extends CheckboxInputRefBase {
+	checked: CheckboxInputRefBase["checked"],
+}

package/src/components/checkbox/index.ts

@@ -1,3 +1,4 @@
 export * from "./Checkbox"
-export * from "./CheckboxProps"
-export * from "./CheckboxRef"
+export type * from "./CheckboxProps"
+export type * from "./CheckboxRef"
+export type * from "./CheckboxRefBase"

package/src/components/checkbox-input/CheckboxInput.tsx

@@ -42,12 +42,12 @@ import type {
 } from "./CheckboxInputRef"
 
 import type {
-	CheckboxInputState,
-} from "./CheckboxInputState"
+	CheckboxInputRefBase,
+} from "./CheckboxInputRefBase"
 
 import type {
-	RefBase,
-} from "./_RefBase"
+	CheckboxInputState,
+} from "./CheckboxInputState"
 
 export const CheckboxInput = forwardRef<CheckboxInputRef, CheckboxInputProps>(
 	function CheckboxInput(
@@ -152,8 +152,8 @@ export const CheckboxInput = forwardRef<CheckboxInputRef, CheckboxInputProps>(
 		])
 
 		useImperativeHandle(forwardedRef, () => {
-			return Object.assign<View, RefBase>(
-				viewRef.current as View,
+			return Object.assign<View, CheckboxInputRefBase>(
+				viewRef.current ?? {} as View,
 				{
 					get checked() {
 						return checked
@@ -230,7 +230,7 @@ export const CheckboxInput = forwardRef<CheckboxInputRef, CheckboxInputProps>(
 
 const
 	size =
-		18,
+		16,
 
 	iconSize =
 		size - 4,

package/src/components/checkbox-input/CheckboxInputRef.ts

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

package/src/components/checkbox-input/{_RefBase.ts → CheckboxInputRefBase.ts}

@@ -2,10 +2,13 @@ import type {
 	CheckboxInputState,
 } from "./CheckboxInputState"
 
-export interface RefBase {
+export interface CheckboxInputRefBase {
+	/**
+	 * The current checked value.
+	 */
 	readonly checked: CheckboxInputState,
 	/**
-	 * This method does nothing when `controlled` prop is true
+	 * This method does nothing if `checked` component prop is defined
 	 */
 	setChecked: (value: CheckboxInputState | ((value: CheckboxInputState) => CheckboxInputState)) => void,
 }

package/src/components/checkbox-input/index.ts

@@ -1,5 +1,6 @@
 export * from "./CheckboxInput"
-export * from "./CheckboxInputInteractiveState"
-export * from "./CheckboxInputProps"
-export * from "./CheckboxInputRef"
-export * from "./CheckboxInputState"
+export type * from "./CheckboxInputInteractiveState"
+export type * from "./CheckboxInputProps"
+export type * from "./CheckboxInputRef"
+export type * from "./CheckboxInputRefBase"
+export type * from "./CheckboxInputState"

package/src/components/collapsible/Collapsible.tsx

@@ -30,14 +30,13 @@ import type {
 } from "./CollapsibleRef"
 
 import type {
-	RefBase,
-} from "./_RefBase"
+	CollapsibleRefBase,
+} from "./CollapsibleRefBase"
 
 export const Collapsible = forwardRef<CollapsibleRef, CollapsibleProps>(
 	function(
 		{
-			defaultOpen,
-			open: openProp,
+			open,
 			motion = {
 				toOpen: {
 					duration: Motion.Duration.fast_02,
@@ -60,7 +59,7 @@ export const Collapsible = forwardRef<CollapsibleRef, CollapsibleProps>(
 			},
 			children,
 			style,
-			contentContainerStyle,
+			contentContainerProps,
 			onToggle,
 			onOpened,
 			onClosed,
@@ -80,17 +79,11 @@ export const Collapsible = forwardRef<CollapsibleRef, CollapsibleProps>(
 					 */
 					positionView: "absolute" | "relative",
 					contentHeight: number,
-					openSelf: boolean,
 				}>({
-					positionView: defaultOpen ?? openProp ? "relative" : "absolute",
+					positionView: open ? "relative" : "absolute",
 					contentHeight: 0,
-					openSelf: !!defaultOpen,
 				}),
 
-			[openSelf, setOpenSelf] =
-				useState(!!defaultOpen)
-
-		const
 			/**
 			 * Absolute position is required to keep content being rendered as it is when the container is not open (zero height)  
 			 *
@@ -100,9 +93,7 @@ export const Collapsible = forwardRef<CollapsibleRef, CollapsibleProps>(
 			 */
 			[positionView, setPositionView] =
 				useState<"absolute" | "relative">(
-					defaultOpen ?? openProp ? "relative" : "absolute",
-					// same like ref.current.positionView
-					// can't use it directly because the eslint-plugin-react-hooks
+					ref.current.positionView,
 				),
 
 			heightAnimated =
@@ -115,12 +106,6 @@ export const Collapsible = forwardRef<CollapsibleRef, CollapsibleProps>(
 			contentContainerAnimated =
 				useRef(new Animated.Value(0)),
 
-			controlled =
-				typeof openProp === "boolean",
-
-			open =
-				controlled ? !!openProp : openSelf,
-
 			setPositionViewToAbsolute =
 				useCallback(() => {
 					if(ref.current.positionView === "relative") {
@@ -161,7 +146,11 @@ export const Collapsible = forwardRef<CollapsibleRef, CollapsibleProps>(
 							duration: motion.toOpen.duration,
 							easing: motion.toOpen.easing as EasingFunction,
 						},
-					).start(onOpened)
+					).start(({ finished }) => {
+						if(finished && onOpened) {
+							onOpened()
+						}
+					})
 					Animated.timing(
 						contentContainerAnimated.current,
 						{
@@ -180,7 +169,11 @@ export const Collapsible = forwardRef<CollapsibleRef, CollapsibleProps>(
 							easing: motion.toClose.easing as EasingFunction,
 							useNativeDriver: false,
 						},
-					).start(onClosed)
+					).start(({ finished }) => {
+						if(finished && onClosed) {
+							onClosed()
+						}
+					})
 					Animated.timing(
 						contentContainerAnimated.current,
 						{
@@ -191,7 +184,7 @@ export const Collapsible = forwardRef<CollapsibleRef, CollapsibleProps>(
 						},
 					).start()
 				}
-				onToggle?.(open)
+				onToggle?.(!!open)
 			}
 		}, [
 			open,
@@ -204,29 +197,21 @@ export const Collapsible = forwardRef<CollapsibleRef, CollapsibleProps>(
 		])
 
 		useImperativeHandle(forwardedRef, () => {
-			return Object.assign<View, RefBase>(
+			return Object.assign<View, CollapsibleRefBase>(
 				viewRef.current as View,
 				{
-					setOpen(value) {
-						if(!controlled) {
-							if(typeof value === "boolean") {
-								ref.current.openSelf = value
-							} else {
-								ref.current.openSelf = value(ref.current.openSelf)
-							}
-							setOpenSelf(ref.current.openSelf)
-						}
+					get open() {
+						return !!open
 					},
 				},
 			)
 		}, [
-			controlled,
+			open,
 		])
 
 		return (
 			<Animated.View
 				{ ...props }
-				/* eslint-disable react-hooks/refs */
 				style={ [
 					CarbonStyleSheet.g.overflow_hidden,
 					positionView === "absolute"
@@ -236,7 +221,6 @@ export const Collapsible = forwardRef<CollapsibleRef, CollapsibleProps>(
 						: null,
 					style,
 				] }
-				/* eslint-enable react-hooks/refs */
 				ref={ viewRef }
 			>
 				<View
@@ -248,7 +232,7 @@ export const Collapsible = forwardRef<CollapsibleRef, CollapsibleProps>(
 					] }
 				>
 					<Animated.View
-						/* eslint-disable react-hooks/refs */
+						{ ...contentContainerProps }
 						style={ [
 							CarbonStyleSheet.g.flex_initial,
 							{
@@ -263,9 +247,8 @@ export const Collapsible = forwardRef<CollapsibleRef, CollapsibleProps>(
 									}),
 								}],
 							},
-							contentContainerStyle,
+							contentContainerProps?.style,
 						] }
-						/* eslint-enable react-hooks/refs */
 						onLayout={ onLayoutContent }
 					>
 						{ children }

package/src/components/collapsible/CollapsibleProps.ts

@@ -4,13 +4,12 @@ import type {
 } from "react-native"
 
 export interface CollapsibleProps extends ViewProps {
-	defaultOpen?: boolean,
 	open?: boolean,
 	motion?: Record<"toOpen" | "toClose", {
 		duration: number,
 		easing?: EasingFunction,
 	}>,
-	contentContainerStyle?: ViewProps["style"],
+	contentContainerProps?: Omit<ViewProps, "children">,
 	onToggle?: (value: boolean) => void,
 	onOpened?: () => void,
 	onClosed?: () => void,

package/src/components/collapsible/CollapsibleRef.ts

@@ -3,9 +3,9 @@ import type {
 } from "react-native"
 
 import type {
-	RefBase,
-} from "./_RefBase"
+	CollapsibleRefBase,
+} from "./CollapsibleRefBase"
 
-export interface CollapsibleRef extends View, RefBase {
+export interface CollapsibleRef extends View, CollapsibleRefBase {
 }
 

package/src/components/collapsible/CollapsibleRefBase.ts

@@ -0,0 +1,8 @@
+export interface CollapsibleRefBase {
+	/**
+	 * The current open value.
+	 * 
+	 * Set this to new value will do nothing when the `open` component prop is defined a.k.a controlled component.
+	 */
+	readonly open: boolean,
+}

package/src/components/collapsible/index.ts

@@ -1,3 +1,4 @@
 export * from "./Collapsible"
-export * from "./CollapsibleProps"
-export * from "./CollapsibleRef"
+export type * from "./CollapsibleProps"
+export type * from "./CollapsibleRef"
+export type * from "./CollapsibleRefBase"

package/src/components/index.ts

@@ -36,6 +36,7 @@ export * from "./table"
 export * from "./table-batch-action-bar"
 export * from "./table-batch-action-bar-button"
 export * from "./table-cell"
+export * from "./table-cell-checkbox"
 export * from "./table-cell-header"
 export * from "./table-cell-icon"
 export * from "./table-cell-text"
@@ -44,6 +45,7 @@ export * from "./table-toolbar"
 export * from "./table-toolbar-button"
 export * from "./table-toolbar-switcher"
 export * from "./table-row"
+export * from "./table-row-collapsible"
 export * from "./table-row-header"
 export * from "./text"
 export * from "./text-area"

package/src/components/radio-button/RadioButton.tsx

@@ -51,8 +51,8 @@ import type {
 } from "./RadioButtonRef"
 
 import type {
-	RefBase,
-} from "./_RefBase"
+	RadioButtonRefBase,
+} from "./RadioButtonRefBase"
 
 export const RadioButton = forwardRef<RadioButtonRef, RadioButtonProps>(
 	function RadioButton(
@@ -97,12 +97,12 @@ export const RadioButton = forwardRef<RadioButtonRef, RadioButtonProps>(
 				])
 
 		useImperativeHandle(forwardedRef, () => {
-			return Object.assign<View, RefBase>(
+			return Object.assign<View, RadioButtonRefBase>(
 				(viewRef.current ?? {
 				}) as View,
 				{
 					get checked() {
-						return radioButtonInputRef.current!.checked
+						return !!radioButtonInputRef.current?.checked
 					},
 					setChecked(checked_) {
 						radioButtonInputRef.current?.setChecked(checked_)

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

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

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

@@ -0,0 +1,6 @@
+import type {
+	RadioButtonInputRefBase,
+} from "../radio-button-input/RadioButtonInputRefBase"
+
+export interface RadioButtonRefBase extends RadioButtonInputRefBase {
+}

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

package/src/components/table-cell/TableCellProps.ts

@@ -26,6 +26,11 @@ export interface TableCellProps extends ViewProps {
 	 * `children` prop takes over precedence over this prop.
 	 */
 	text?: string,
+	/**
+	 * You may need this to make the checkbox cell invisible,
+	 * but consist its width
+	 */
+	invisible?: boolean,
 	/**
 	 * Only applies if you use the `text` prop instead of `children`
 	 */