@audira/carbon-react-native 1.0.4 → 1.0.6

package/src/components/accordion/_Item.tsx

@@ -38,14 +38,14 @@ import type {
 	AccordionItemRef,
 } from "./AccordionItemRef"
 
+import type {
+	AccordionItemRefBase,
+} from "./AccordionItemRefBase"
+
 import {
 	Header,
 } from "./_Header"
 
-import type {
-	ItemRefBase,
-} from "./_ItemRefBase"
-
 import {
 	Context,
 } from "./_context"
@@ -79,14 +79,13 @@ export const Item = forwardRef<AccordionItemRef, AccordionItemProps>(
 			ref =
 				useRef({
 					allowOnChangeEffect: false,
-					open: !!defaultOpen,
 				}),
 
 			viewRef =
 				useRef<View>(null),
 
 			[openSelf, setOpenSelf] =
-				useState(ref.current.open),
+				useState(!!defaultOpen),
 
 			controlled =
 				typeof openProp !== "undefined",
@@ -107,26 +106,28 @@ export const Item = forwardRef<AccordionItemRef, AccordionItemProps>(
 				])
 
 		useImperativeHandle(forwardedRef, () => {
-			return Object.assign<View, ItemRefBase>(
+			return Object.assign<View, AccordionItemRefBase>(
 				(viewRef.current ?? {
 				}) as View,
 				{
 					get open() {
-						return ref.current.open
+						return open
 					},
 					setOpen(value) {
 						if(!controlled) {
+							let openNext: boolean
 							if(typeof value === "boolean") {
-								ref.current.open = value
+								openNext = value
 							} else {
-								ref.current.open = value(ref.current.open)
+								openNext = value(open)
 							}
-							setOpenSelf(ref.current.open)
+							setOpenSelf(openNext)
 						}
 					},
 				},
 			)
 		}, [
+			open,
 			controlled,
 		])
 
@@ -148,11 +149,13 @@ export const Item = forwardRef<AccordionItemRef, AccordionItemProps>(
 					motion={ Motion }
 					open={ open }
 					dir={ globalConfigContext.rtl ? "rtl" : undefined }
-					contentContainerStyle={ [
-						globalConfigContext.rtl ? CarbonStyleSheet.g.rtl : undefined,
-						accordionContext.collapsibleContentContainerStyle,
-						style.panel,
-					] }
+					contentContainerProps={{
+						style: [
+							globalConfigContext.rtl ? CarbonStyleSheet.g.rtl : undefined,
+							accordionContext.collapsibleContentContainerStyle,
+							style.panel,
+						],
+					}}
 				>
 					{ children }
 				</Collapsible>

package/src/components/accordion/_context.ts

@@ -13,7 +13,7 @@ import type {
 export interface Context {
 	size?: AccordionHeaderProps["size"],
 	flushAlignment?: AccordionHeaderProps["flushAlignment"],
-	collapsibleContentContainerStyle?: CollapsibleProps["contentContainerStyle"],
+	collapsibleContentContainerStyle?: NonNullable<CollapsibleProps["contentContainerProps"]>["style"],
 }
 
 export const Context = createContext<Context>({

package/src/components/accordion/_motion.ts

@@ -10,7 +10,7 @@ import type {
 	CollapsibleProps,
 } from "../collapsible/CollapsibleProps"
 
-export const Motion: NonNullable<CollapsibleProps["motion"]> =
+export const Motion =
 	{
 		toOpen: {
 			duration: Motion_.Duration.fast_02,
@@ -24,4 +24,4 @@ export const Motion: NonNullable<CollapsibleProps["motion"]> =
 		toClose: {
 			duration: 0,
 		},
-	}
+	} as const satisfies NonNullable<CollapsibleProps["motion"]>

package/src/components/accordion/index.ts

@@ -1,7 +1,8 @@
 export * from "./Accordion"
-export * from "./AccordionHeaderProps"
-export * from "./AccordionItemProps"
-export * from "./AccordionItemRef"
-export * from "./AccordionProps"
-export * from "./AccordionRef"
-export * from "./AccordionSize"
+export type * from "./AccordionHeaderProps"
+export type * from "./AccordionItemProps"
+export type * from "./AccordionItemRef"
+export type * from "./AccordionItemRefBase"
+export type * from "./AccordionProps"
+export type * from "./AccordionRef"
+export type * from "./AccordionSize"

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/checkbox/Checkbox.tsx

@@ -47,9 +47,8 @@ import type {
 } from "./CheckboxRef"
 
 import type {
-	RefBase,
-} from "./_RefBase"
-
+	CheckboxRefBase,
+} from "./CheckboxRefBase"
 
 export const Checkbox = forwardRef<CheckboxRef, CheckboxProps>(
 	function Checkbox(
@@ -95,12 +94,12 @@ export const Checkbox = forwardRef<CheckboxRef, CheckboxProps>(
 				])
 
 		useImperativeHandle(forwardedRef, () => {
-			return Object.assign<View, RefBase>(
+			return Object.assign<View, CheckboxRefBase>(
 				(viewRef.current ?? {
 				}) as View,
 				{
 					get checked() {
-						return checkboxInputRef.current!.checked
+						return checkboxInputRef.current?.checked ?? false
 					},
 					setChecked(value_) {
 						checkboxInputRef.current?.setChecked(value_)

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

@@ -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,11 +33,19 @@ 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-checkbox"
 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-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 {
+}