@audira/carbon-react-native 1.0.0-beta.8 → 1.0.0

package/src/components/checkbox/Checkbox.tsx

@@ -18,23 +18,16 @@ import {
 	Spacing,
 } from "@audira/carbon-react-native-elements"
 
-import {
-	GlobalConfigContext,
-} from "../../_internal/contexts"
-
-import {
-	CommonStyleSheet,
-	FlexStyleSheet,
-} from "../../_internal/style-sheets"
-
-import {
-	CarbonStyleSheet,
-} from "../../carbon-style-sheet"
+import * as CarbonStyleSheet from "../../carbon-style-sheet"
 
 import {
 	ThemeContext,
 } from "../../contexts"
 
+import {
+	Box,
+} from "../box"
+
 import {
 	CheckboxInput,
 	type CheckboxInputInteractiveState,
@@ -61,8 +54,8 @@ import type {
 export const Checkbox = forwardRef<CheckboxRef, CheckboxProps>(
 	function Checkbox(
 		{
-			defaultValue,
-			value,
+			defaultChecked,
+			checked,
 			interactiveState = "normal",
 			label,
 			role = "checkbox",
@@ -73,7 +66,6 @@ export const Checkbox = forwardRef<CheckboxRef, CheckboxProps>(
 			formLabelProps,
 			pressableProps,
 			style,
-			dir,
 			...props
 		},
 		forwardedRef,
@@ -82,9 +74,6 @@ export const Checkbox = forwardRef<CheckboxRef, CheckboxProps>(
 		useContext(ThemeContext)
 
 		const
-			globalConfigContext =
-				useContext(GlobalConfigContext),
-
 			checkboxInputRef =
 				useRef<CheckboxInputRef>(null),
 
@@ -95,10 +84,10 @@ export const Checkbox = forwardRef<CheckboxRef, CheckboxProps>(
 				useCallback(event => {
 					onPress?.(event)
 					if(checkboxInputRef.current) {
-						checkboxInputRef.current.setValue(
-							checkboxInputRef.current.value === null
+						checkboxInputRef.current.setChecked(
+							checkboxInputRef.current.checked === null
 								? true
-								: !checkboxInputRef.current.value,
+								: !checkboxInputRef.current.checked,
 						)
 					}
 				}, [
@@ -110,24 +99,22 @@ export const Checkbox = forwardRef<CheckboxRef, CheckboxProps>(
 				(viewRef.current ?? {
 				}) as View,
 				{
-					get value() {
-						return checkboxInputRef.current!.value
+					get checked() {
+						return checkboxInputRef.current!.checked
 					},
-					setValue(value_) {
-						checkboxInputRef.current?.setValue(value_)
+					setChecked(value_) {
+						checkboxInputRef.current?.setChecked(value_)
 					},
 				},
 			)
 		}, [])
 
 		return (
-			<View
+			<Box
 				{ ...props }
 				aria-label={ ariaLabel || label }
-				dir={ dir ?? globalConfigContext.rtl ? "rtl" : undefined }
 				style={ [
-					FlexStyleSheet.flex_row,
-					globalConfigContext.rtl ? CommonStyleSheet.rtl : undefined,
+					CarbonStyleSheet.g.flex_row,
 					style,
 				] }
 				ref={ viewRef }
@@ -139,9 +126,9 @@ export const Checkbox = forwardRef<CheckboxRef, CheckboxProps>(
 					aria-label={ pressableProps?.["aria-label"] ?? label }
 					onPress={ pressHandler }
 					style={ [
-						CommonStyleSheet.absolute,
-						CommonStyleSheet.w_full,
-						CommonStyleSheet.h_full,
+						CarbonStyleSheet.g.absolute,
+						CarbonStyleSheet.g.w_full,
+						CarbonStyleSheet.g.h_full,
 						baseStyle.pressable,
 						pressableProps?.style,
 					] }
@@ -150,8 +137,8 @@ export const Checkbox = forwardRef<CheckboxRef, CheckboxProps>(
 				<CheckboxInput
 					{ ...checkboxInputProps }
 					role="none"
-					defaultValue={ defaultValue }
-					value={ value }
+					defaultChecked={ defaultChecked }
+					checked={ checked }
 					interactiveState={ interactiveState }
 					onChange={ onChange }
 					onPress={ onPress }
@@ -174,12 +161,12 @@ export const Checkbox = forwardRef<CheckboxRef, CheckboxProps>(
 						],
 					}}
 					style={ [
-						FlexStyleSheet.flex_1,
+						CarbonStyleSheet.g.flex_1,
 						baseStyle.label,
 						formLabelProps?.style,
 					] }
 				/>
-			</View>
+			</Box>
 		)
 
 	},

package/src/components/checkbox/CheckboxProps.ts

@@ -1,8 +1,11 @@
 import type {
 	PressableProps,
-	ViewProps,
 } from "react-native"
 
+import type {
+	BoxProps,
+} from "../box"
+
 import type {
 	CheckboxInputProps,
 } from "../checkbox-input"
@@ -11,18 +14,17 @@ import type {
 	FormLabelProps,
 } from "../form-label"
 
-export interface CheckboxProps extends Omit<ViewProps, "children"> {
-	defaultValue?: CheckboxInputProps["defaultValue"],
-	value?: CheckboxInputProps["value"],
+export interface CheckboxProps extends Omit<BoxProps, "children"> {
+	defaultChecked?: CheckboxInputProps["defaultChecked"],
+	checked?: CheckboxInputProps["checked"],
 	interactiveState?: CheckboxInputProps["interactiveState"],
 	label: string,
 	onChange?: CheckboxInputProps["onChange"],
 	onPress?: CheckboxInputProps["onPress"],
 	checkboxInputProps?: Omit<
 		CheckboxInputProps,
-		| "defaultValue"
-		| "value"
-		| "indeterminate"
+		| "defaultChecked"
+		| "checked"
 		| "interactiveState"
 		| "role"
 		| "onChange"
@@ -34,6 +36,6 @@ export interface CheckboxProps extends Omit<ViewProps, "children"> {
 		| "style"
 		| "onPress"
 	> & {
-		style?: ViewProps["style"],
+		style?: BoxProps["style"],
 	},
 }

package/src/components/checkbox/_RefBase.ts

@@ -3,9 +3,9 @@ import type {
 } from "../checkbox-input/CheckboxInputRef"
 
 export interface RefBase {
-	readonly value: CheckboxInputRef["value"],
+	readonly checked: CheckboxInputRef["checked"],
 	/**
 	 * This method does nothing when `controlled` prop is true
 	 */
-	setValue: CheckboxInputRef["setValue"],
+	setChecked: CheckboxInputRef["setChecked"],
 }

package/src/components/checkbox-group/CheckboxGroup.tsx

@@ -5,8 +5,6 @@ import {
 
 import {
 	StyleSheet,
-	View,
-	type ViewStyle,
 } from "react-native"
 
 import {
@@ -21,19 +19,17 @@ import type {
 	SvgProps,
 } from "react-native-svg"
 
-import {
-	GlobalConfigContext,
-} from "../../_internal/contexts"
-
-import {
-	CommonStyleSheet,
-	FlexStyleSheet,
-} from "../../_internal/style-sheets"
+import * as CarbonStyleSheet from "../../carbon-style-sheet"
 
 import {
 	ThemeContext,
 } from "../../contexts"
 
+import {
+	Box,
+	type BoxProps,
+} from "../box"
+
 import {
 	Checkbox,
 } from "../checkbox"
@@ -64,25 +60,14 @@ const Component = forwardRef<CheckboxGroupRef, CheckboxGroupProps>(
 			helperTextModeIcon = true,
 			formHelperTextProps,
 			children,
-			style,
-			dir,
 			...props
 		},
 		ref,
 	) {
 
-		const
-			globalConfigContext =
-				useContext(GlobalConfigContext)
-
 		return (
-			<View
+			<Box
 				{ ...props }
-				dir={ dir ?? globalConfigContext.rtl ? "rtl" : undefined }
-				style={ [
-					globalConfigContext.rtl ? CommonStyleSheet.rtl : undefined,
-					style,
-				] }
 				ref={ ref }
 			>
 				<FormLabel
@@ -90,14 +75,14 @@ const Component = forwardRef<CheckboxGroupRef, CheckboxGroupProps>(
 					style={ baseStyle.legend }
 				/>
 
-				<View
+				<Box
 					style={ [
 						baseStyle.wrapper,
 						wrapperOrientationStyle[orientation],
 					] }
 				>
 					{ children }
-				</View>
+				</Box>
 
 				{ !!helperText && (
 					<FormHelperText
@@ -117,7 +102,7 @@ const Component = forwardRef<CheckboxGroupRef, CheckboxGroupProps>(
 						] }
 					/>
 				) }
-			</View>
+			</Box>
 		)
 
 	},
@@ -142,16 +127,11 @@ const
 			},
 		}),
 
-	wrapperOrientationStyle =
-		StyleSheet.create<Record<NonNullable<CheckboxGroupProps["orientation"]>, ViewStyle>>({
-			vertical: {
-				flexDirection: "column",
-			},
-			horizontal: {
-				...FlexStyleSheet.flex_wrap,
-				flexDirection: "row",
-			},
-		}),
+	wrapperOrientationStyle: Record<NonNullable<CheckboxGroupProps["orientation"]>, BoxProps["style"]> =
+		{
+			vertical: CarbonStyleSheet.g.flex_col,
+			horizontal: [CarbonStyleSheet.g.flex_row, CarbonStyleSheet.g.flex_wrap],
+		},
 
 	mapIconErrorFillColor: Record<ThemeContext["colorScheme"], string> =
 		{

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

@@ -23,14 +23,7 @@ import {
 import IconCheckmark from "@carbon/icons/svg/32/checkmark.svg"
 import IconSubtract from "@carbon/icons/svg/32/subtract.svg"
 
-import {
-	CommonStyleSheet,
-	FlexStyleSheet,
-} from "../../_internal/style-sheets"
-
-import {
-	CarbonStyleSheet,
-} from "../../carbon-style-sheet"
+import * as CarbonStyleSheet from "../../carbon-style-sheet"
 
 import {
 	ThemeContext,
@@ -49,8 +42,8 @@ import type {
 } from "./CheckboxInputRef"
 
 import type {
-	CheckboxInputValue,
-} from "./CheckboxInputValue"
+	CheckboxInputState,
+} from "./CheckboxInputState"
 
 import type {
 	RefBase,
@@ -59,8 +52,8 @@ import type {
 export const CheckboxInput = forwardRef<CheckboxInputRef, CheckboxInputProps>(
 	function CheckboxInput(
 		{
-			defaultValue,
-			value: valueProp,
+			defaultChecked,
+			checked: checkedProp,
 			interactiveState = "normal",
 			style,
 			role = "checkbox",
@@ -83,32 +76,32 @@ export const CheckboxInput = forwardRef<CheckboxInputRef, CheckboxInputProps>(
 			ref =
 				useRef({
 					onChangeEffect: false,
-					value: typeof valueProp == "boolean" || typeof valueProp == "object"
-						? valueProp
-						: typeof defaultValue == "boolean" || typeof defaultValue == "object"
-							? defaultValue
+					value: typeof checkedProp == "boolean" || typeof checkedProp == "object"
+						? checkedProp
+						: typeof defaultChecked == "boolean" || typeof defaultChecked == "object"
+							? defaultChecked
 							: false,
 				}),
 
 			[isFocused, setIsFocused] =
 				useState(false),
 
-			[valueSelf, setValueSelf] =
+			[checkedSelf, setCheckedSelf] =
 				useState(() => {
-					if(typeof defaultValue == "boolean" || typeof defaultValue == "object") {
-						return defaultValue
+					if(typeof defaultChecked == "boolean" || typeof defaultChecked == "object") {
+						return defaultChecked
 					}
 					return false
 				}),
 
 			controlled =
-				typeof valueProp !== "undefined",
+				typeof checkedProp !== "undefined",
 
-			value =
-				controlled ? valueProp : valueSelf,
+			checked =
+				controlled ? checkedProp : checkedSelf,
 
 			indeterminate =
-				value === null,
+				checked === null,
 
 			blurHandler: NonNullable<PressableProps["onBlur"]> =
 				useCallback(event => {
@@ -132,7 +125,7 @@ export const CheckboxInput = forwardRef<CheckboxInputRef, CheckboxInputProps>(
 					if(interactiveState !== "read_only") {
 						if(!controlled) {
 							ref.current.onChangeEffect = true
-							setValueSelf(self => self === null ? true : !self)
+							setCheckedSelf(self => self === null ? true : !self)
 						} else {
 							onChange?.(ref.current.value === null ? true : !ref.current.value)
 						}
@@ -148,13 +141,13 @@ export const CheckboxInput = forwardRef<CheckboxInputRef, CheckboxInputProps>(
 				mapIconColor[interactiveState][themeContext.colorScheme]
 
 		useEffect(() => {
-			ref.current.value = value
+			ref.current.value = checked
 			if(ref.current.onChangeEffect) {
 				ref.current.onChangeEffect = false
-				onChange?.(value)
+				onChange?.(checked)
 			}
 		}, [
-			value,
+			checked,
 			onChange,
 		])
 
@@ -162,13 +155,13 @@ export const CheckboxInput = forwardRef<CheckboxInputRef, CheckboxInputProps>(
 			return Object.assign<View, RefBase>(
 				viewRef.current as View,
 				{
-					get value() {
-						return value
+					get checked() {
+						return checked
 					},
-					setValue(value_) {
+					setChecked(value_) {
 						if(!controlled && interactiveState !== "read_only") {
 							ref.current.onChangeEffect = true
-							setValueSelf(self => {
+							setCheckedSelf(self => {
 								if(typeof value_ === "function") {
 									ref.current.value = value_(self)
 								} else {
@@ -181,7 +174,7 @@ export const CheckboxInput = forwardRef<CheckboxInputRef, CheckboxInputProps>(
 				},
 			)
 		}, [
-			value,
+			checked,
 			controlled,
 			interactiveState,
 		])
@@ -195,19 +188,19 @@ export const CheckboxInput = forwardRef<CheckboxInputRef, CheckboxInputProps>(
 				onFocus={ focusHandler }
 				onPress={ pressHandler }
 				style={ [
-					FlexStyleSheet.items_center,
-					FlexStyleSheet.justify_center,
-					CommonStyleSheet.relative,
+					CarbonStyleSheet.g.items_center,
+					CarbonStyleSheet.g.justify_center,
+					CarbonStyleSheet.g.relative,
 					baseStyle.checkbox,
-					getInteractiveStateStyle(interactiveState, value),
+					getInteractiveStateStyle(interactiveState, checked),
 					style,
 				] }
 				ref={ viewRef }
 			>
 				<View
 					style={ [
-						CommonStyleSheet.absolute,
-						CommonStyleSheet.overflow_hidden,
+						CarbonStyleSheet.g.absolute,
+						CarbonStyleSheet.g.overflow_hidden,
 						baseStyle.focusBox,
 						isFocused
 							? carbonStyle.focusBox
@@ -215,7 +208,7 @@ export const CheckboxInput = forwardRef<CheckboxInputRef, CheckboxInputProps>(
 					] }
 				/>
 
-				{ value && indeterminate ? (
+				{ indeterminate ? (
 					<IconSubtract
 						width={ iconSize }
 						height={ iconSize }
@@ -226,7 +219,7 @@ export const CheckboxInput = forwardRef<CheckboxInputRef, CheckboxInputProps>(
 						width={ iconSize }
 						height={ iconSize }
 						fill={ iconColor }
-						style={ !value ? baseStyle.checkmarkHidden : null }
+						style={ !checked ? baseStyle.checkmarkHidden : null }
 					/>
 				) }
 			</Pressable>
@@ -334,7 +327,7 @@ const
 
 function getInteractiveStateStyle(
 	interactiveState: CheckboxInputInteractiveState,
-	value: CheckboxInputValue,
+	value: CheckboxInputState,
 ) {
-	return interactiveStyle[`${interactiveState}_${!!value}`]
+	return interactiveStyle[`${interactiveState}_${typeof value == "object" ? true : value}`]
 }

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

@@ -8,18 +8,20 @@ import type {
 } from "./CheckboxInputInteractiveState"
 
 import type {
-	CheckboxInputValue,
-} from "./CheckboxInputValue"
+	CheckboxInputState,
+} from "./CheckboxInputState"
 
 export interface CheckboxInputProps extends Omit<
 	PressableProps,
+	| "defaultValue"
+	| "value"
 	| "children"
 	| "disabled"
 	| "style"
 > {
-	defaultValue?: CheckboxInputValue,
-	value?: CheckboxInputValue,
+	defaultChecked?: CheckboxInputState,
+	checked?: CheckboxInputState,
 	interactiveState?: CheckboxInputInteractiveState,
-	onChange?: (value: CheckboxInputValue) => void,
+	onChange?: (value: CheckboxInputState) => void,
 	style?: ViewProps["style"],
 }

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

@@ -0,0 +1,6 @@
+/**
+ * null = indeterminate
+ */
+export type CheckboxInputState =
+	| boolean
+	| null

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

@@ -1,11 +1,11 @@
 import type {
-	CheckboxInputValue,
-} from "./CheckboxInputValue"
+	CheckboxInputState,
+} from "./CheckboxInputState"
 
 export interface RefBase {
-	readonly value: CheckboxInputValue,
+	readonly checked: CheckboxInputState,
 	/**
 	 * This method does nothing when `controlled` prop is true
 	 */
-	setValue: (value: CheckboxInputValue | ((value: CheckboxInputValue) => CheckboxInputValue)) => void,
+	setChecked: (value: CheckboxInputState | ((value: CheckboxInputState) => CheckboxInputState)) => void,
 }

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

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

package/src/components/collapsible/Collapsible.tsx

@@ -19,10 +19,7 @@ import {
 	Motion,
 } from "@audira/carbon-react-native-elements"
 
-import {
-	CommonStyleSheet,
-	FlexStyleSheet,
-} from "../../_internal/style-sheets"
+import * as CarbonStyleSheet from "../../carbon-style-sheet"
 
 import type {
 	CollapsibleProps,
@@ -91,8 +88,9 @@ export const Collapsible = forwardRef<CollapsibleRef, CollapsibleProps>(
 				}),
 
 			[openSelf, setOpenSelf] =
-				useState(ref.current.openSelf),
+				useState(!!defaultOpen)
 
+		const
 			/**
 			 * Absolute position is required to keep content being rendered as it is when the container is not open (zero height)  
 			 *
@@ -101,7 +99,11 @@ export const Collapsible = forwardRef<CollapsibleRef, CollapsibleProps>(
 			 * This state will be changed once only from 'relative' to 'absolute'  
 			 */
 			[positionView, setPositionView] =
-				useState<"absolute" | "relative">(ref.current.positionView),
+				useState<"absolute" | "relative">(
+					defaultOpen ?? openProp ? "relative" : "absolute",
+					// same like ref.current.positionView
+					// can't use it directly because the eslint-plugin-react-hooks
+				),
 
 			heightAnimated =
 				useRef(new Animated.Value(0)),
@@ -224,8 +226,9 @@ export const Collapsible = forwardRef<CollapsibleRef, CollapsibleProps>(
 		return (
 			<Animated.View
 				{ ...props }
+				/* eslint-disable react-hooks/refs */
 				style={ [
-					CommonStyleSheet.overflow_hidden,
+					CarbonStyleSheet.g.overflow_hidden,
 					positionView === "absolute"
 						? {
 							height: heightAnimated.current,
@@ -233,19 +236,21 @@ export const Collapsible = forwardRef<CollapsibleRef, CollapsibleProps>(
 						: null,
 					style,
 				] }
+				/* eslint-enable react-hooks/refs */
 				ref={ viewRef }
 			>
 				<View
 					style={ [
-						CommonStyleSheet.w_full,
+						CarbonStyleSheet.g.w_full,
 						{
 							position: positionView,
 						},
 					] }
 				>
 					<Animated.View
+						/* eslint-disable react-hooks/refs */
 						style={ [
-							FlexStyleSheet.flex_initial,
+							CarbonStyleSheet.g.flex_initial,
 							{
 								opacity: contentContainerAnimated.current.interpolate({
 									inputRange: contentContainerInterpolationRange as unknown as number[],
@@ -260,6 +265,7 @@ export const Collapsible = forwardRef<CollapsibleRef, CollapsibleProps>(
 							},
 							contentContainerStyle,
 						] }
+						/* eslint-enable react-hooks/refs */
 						onLayout={ onLayoutContent }
 					>
 						{ children }