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

package/src/components/form-helper-text/FormHelperText.tsx

@@ -5,26 +5,18 @@ import {
 
 import {
 	StyleSheet,
-	View,
 } from "react-native"
 
-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 {
 	Text,
 } from "../text"
@@ -46,7 +38,6 @@ export const FormHelperText = forwardRef<FormHelperTextRef, FormHelperTextProps>
 			textTrailing,
 			textProps,
 			style,
-			dir,
 			...props
 		},
 		ref,
@@ -54,19 +45,13 @@ export const FormHelperText = forwardRef<FormHelperTextRef, FormHelperTextProps>
 
 		useContext(ThemeContext)
 
-		const
-			globalConfigContext =
-				useContext(GlobalConfigContext)
-
 		return (
-			<View
+			<Box
 				{ ...props }
 				ref={ ref }
-				dir={ dir ?? globalConfigContext.rtl ? "rtl" : undefined }
 				style={ [
-					FlexStyleSheet.flex_row,
+					CarbonStyleSheet.g.flex_row,
 					baseStyle.container,
-					globalConfigContext.rtl ? CommonStyleSheet.rtl : undefined,
 					style,
 				] }
 			>
@@ -84,7 +69,7 @@ export const FormHelperText = forwardRef<FormHelperTextRef, FormHelperTextProps>
 				</Text>
 
 				{ textTrailing }
-			</View>
+			</Box>
 		)
 
 	},

package/src/components/form-helper-text/FormHelperTextProps.ts

@@ -1,12 +1,12 @@
 import type {
-	ViewProps,
-} from "react-native"
+	BoxProps,
+} from "../box"
 
 import type {
 	TextProps,
 } from "../text"
 
-export interface FormHelperTextProps extends Omit<ViewProps, "children"> {
+export interface FormHelperTextProps extends Omit<BoxProps, "children"> {
 	error?: boolean,
 	text: string,
 	textLeading?: React.ReactNode,

package/src/components/form-label/FormLabel.tsx

@@ -1,21 +1,16 @@
 import {
 	forwardRef,
-	useContext,
 } from "react"
 
 import {
 	StyleSheet,
-	View,
 } from "react-native"
 
-import {
-	GlobalConfigContext,
-} from "../../_internal/contexts"
+import * as CarbonStyleSheet from "../../carbon-style-sheet"
 
 import {
-	CommonStyleSheet,
-	FlexStyleSheet,
-} from "../../_internal/style-sheets"
+	Box,
+} from "../box"
 
 import {
 	Text,
@@ -37,25 +32,18 @@ export const FormLabel = forwardRef<FormLabelRef, FormLabelProps>(
 			labelTrailing,
 			textProps,
 			style,
-			dir,
 			...props
 		},
 		ref,
 	) {
 
-		const
-			globalConfigContext =
-				useContext(GlobalConfigContext)
-
 		return (
-			<View
+			<Box
 				{ ...props }
 				ref={ ref }
-				dir={ dir ?? globalConfigContext.rtl ? "rtl" : undefined }
 				style={ [
-					FlexStyleSheet.flex_row,
+					CarbonStyleSheet.g.flex_row,
 					baseStyle.gap,
-					globalConfigContext.rtl ? CommonStyleSheet.rtl : undefined,
 					style,
 				] }
 			>
@@ -70,7 +58,7 @@ export const FormLabel = forwardRef<FormLabelRef, FormLabelProps>(
 				</Text>
 
 				{ labelTrailing }
-			</View>
+			</Box>
 		)
 
 	},

package/src/components/form-label/FormLabelProps.ts

@@ -1,12 +1,12 @@
 import type {
-	ViewProps,
-} from "react-native"
+	BoxProps,
+} from "../box"
 
 import type {
 	TextProps,
 } from "../text"
 
-export interface FormLabelProps extends Omit<ViewProps, "children"> {
+export interface FormLabelProps extends Omit<BoxProps, "children"> {
 	label: string,
 	labelLeading?: React.ReactNode,
 	labelTrailing?: React.ReactNode,

package/src/components/index.ts

@@ -0,0 +1,39 @@
+import * as Button from "./button"
+import * as Notification from "./notification"
+import * as Toggle from "./toggle"
+
+export {
+	Button,
+	Notification,
+	Toggle,
+}
+
+export * from "./accordion"
+export * from "./box"
+export * from "./button-group"
+export * from "./checkbox"
+export * from "./checkbox-group"
+export * from "./checkbox-input"
+export * from "./collapsible"
+export * from "./form-helper-text"
+export * from "./form-label"
+export * from "./icon"
+export * from "./inline-loading"
+export * from "./layer"
+export * from "./loading"
+export * from "./modal"
+export * from "./modal-content"
+export * from "./password-input"
+export * from "./password-input-field"
+export * from "./password-input-fluid"
+export * from "./radio-button"
+export * from "./radio-button-group"
+export * from "./radio-button-input"
+export * from "./switch"
+export * from "./text"
+export * from "./text-area"
+export * from "./text-area-field"
+export * from "./text-area-fluid"
+export * from "./text-input"
+export * from "./text-input-field"
+export * from "./text-input-fluid"

package/src/components/inline-loading/InlineLoading.tsx

@@ -5,7 +5,6 @@ import {
 
 import {
 	StyleSheet,
-	View,
 } from "react-native"
 
 import {
@@ -15,23 +14,16 @@ import {
 import IconCheckmarkFilled from "@carbon/icons/svg/32/checkmark--filled.svg"
 import IconErrorFilled from "@carbon/icons/svg/32/error--filled.svg"
 
-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 {
 	Loading,
 } from "../loading"
@@ -56,7 +48,6 @@ export const InlineLoading = forwardRef<InlineLoadingRef, InlineLoadingProps>(
 			style,
 			"aria-label": ariaLabel,
 			textProps,
-			dir,
 			...props
 		},
 		ref,
@@ -64,22 +55,17 @@ export const InlineLoading = forwardRef<InlineLoadingRef, InlineLoadingProps>(
 
 		const
 			themeContext =
-				useContext(ThemeContext),
-
-			globalConfigContext =
-				useContext(GlobalConfigContext)
+				useContext(ThemeContext)
 
 		return (
-			<View
+			<Box
 				ref={ ref }
 				{ ...props }
 				aria-label={ ariaLabel ?? text }
-				dir={ dir ?? globalConfigContext.rtl ? "rtl" : undefined }
 				style={ [
-					FlexStyleSheet.flex_row,
-					FlexStyleSheet.items_center,
+					CarbonStyleSheet.g.flex_row,
+					CarbonStyleSheet.g.items_center,
 					styleSheet.inlineLoading,
-					globalConfigContext.rtl ? CommonStyleSheet.rtl : undefined,
 					style,
 				] }
 			>
@@ -110,7 +96,7 @@ export const InlineLoading = forwardRef<InlineLoadingRef, InlineLoadingProps>(
 						{ text }
 					</Text>
 				) }
-			</View>
+			</Box>
 		)
 
 	},

package/src/components/layer/Layer.tsx

@@ -17,9 +17,7 @@ import {
 	MathHelper,
 } from "../../_internal/helpers"
 
-import {
-	CarbonStyleSheet,
-} from "../../carbon-style-sheet"
+import * as CarbonStyleSheet from "../../carbon-style-sheet"
 
 import {
 	LayerContext,

package/src/components/loading/Loading.tsx

@@ -94,6 +94,7 @@ export const Loading = forwardRef<LoadingRef, LoadingProps>(
 				type={ type }
 				circleStrokeColor={ MapCircleStrokeColor[themeContext.colorScheme] }
 				circleBackgroundColor={ MapCircleBackgroundColor[layerContext][themeContext.colorScheme] }
+				/* eslint-disable react-hooks/refs */
 				style={ [
 					{
 						transform: [{
@@ -105,6 +106,7 @@ export const Loading = forwardRef<LoadingRef, LoadingProps>(
 					},
 					style,
 				] }
+				/* eslint-enable react-hooks/refs */
 			/>
 		)
 

package/src/components/modal/Modal.tsx

@@ -18,23 +18,30 @@ import {
 
 import IconClose from "@carbon/icons/svg/32/close.svg"
 
+import {
+	useSafeAreaInsets,
+} from "react-native-safe-area-context"
+
 import {
 	GlobalConfigContext,
+	InDialogContext,
 	ModalContext,
 } from "../../_internal/contexts"
 
 import {
-	CommonStyleSheet,
-} from "../../_internal/style-sheets"
+	ModalHelper,
+} from "../../_internal/helpers"
 
-import {
-	CarbonStyleSheet,
-} from "../../carbon-style-sheet"
+import * as CarbonStyleSheet from "../../carbon-style-sheet"
 
 import {
 	BreakpointContext,
 } from "../../contexts"
 
+import {
+	Box,
+} from "../box"
+
 import {
 	GhostIcon as ButtonGhostIcon,
 } from "../button/ghost-icon"
@@ -73,10 +80,11 @@ export const Modal = forwardRef<ModalRef, ModalProps>(
 			title,
 			children,
 			buttonCloseProps,
+			applyInsets = "in_dialog_and_small_bp",
+			applyInsetsEdges: applyInsetsEdgesProp,
 			"aria-label": ariaLabel,
 			"aria-labelledby": ariaLabelledBy,
 			style,
-			dir,
 			...props
 		},
 		ref,
@@ -89,6 +97,9 @@ export const Modal = forwardRef<ModalRef, ModalProps>(
 			globalConfigContext =
 				useContext(GlobalConfigContext),
 
+			inDialogContext =
+				useContext(InDialogContext),
+
 			/**
 			 * Based on carbon modal spec, the background color is based on the current layer level.  
 			 * Should i follow this spec?
@@ -105,24 +116,45 @@ export const Modal = forwardRef<ModalRef, ModalProps>(
 				}, [
 					size,
 					breakpoint,
-				])
+				]),
+
+			safeAreaInsets =
+				useSafeAreaInsets(),
+
+			applyInsetsEdges =
+				{
+					top: applyInsetsEdgesProp?.top ?? true,
+					bottom: applyInsetsEdgesProp?.bottom ?? true,
+					left: applyInsetsEdgesProp?.left ?? true,
+					right: applyInsetsEdgesProp?.right ?? true,
+				},
+
+			isApplyInsets =
+				ModalHelper.isApplyInsets({
+					applyInsets,
+					breakpoint,
+					inDialog: inDialogContext,
+				})
 
 		return (
 			<ModalContext.Provider
 				value={{
 					size,
+					applyInsets,
+					applyInsetsEdges,
 				}}
 			>
-				<View
+				<Box
 					ref={ ref }
 					{ ...props }
 					aria-label={ ariaLabel ?? label }
 					aria-labelledBy={ ariaLabelledBy ?? label }
-					dir={ dir ?? globalConfigContext.rtl ? "rtl" : undefined }
 					style={ [
 						bgLayerStyleSheet[`bg_${layerContextLevel}`],
-						styleSheetBySizeAndBreakpoint.modal,
-						globalConfigContext.rtl ? CommonStyleSheet.rtl : undefined,
+						inDialogContext ? styleSheetBySizeAndBreakpoint.modalInDialog : undefined,
+						isApplyInsets && applyInsetsEdges.bottom
+							? { paddingBottom: safeAreaInsets.bottom }
+							: undefined,
 						style,
 					] }
 				>
@@ -132,8 +164,11 @@ export const Modal = forwardRef<ModalRef, ModalProps>(
 					>
 						<View
 							style={ [
-								styleSheet.headerText,
+								styleSheet.headerTextContainer,
 								styleSheetBySizeAndBreakpoint.headerTextContainer,
+								isApplyInsets && applyInsetsEdges.top
+									? { paddingTop: safeAreaInsets.top }
+									: undefined,
 							] }
 						>
 							{ !!label && (
@@ -154,16 +189,21 @@ export const Modal = forwardRef<ModalRef, ModalProps>(
 							{ ...buttonCloseProps }
 							Icon={ IconClose }
 							style={ [
-								CommonStyleSheet.absolute,
+								CarbonStyleSheet.g.absolute,
 								styleSheet.iconClose,
-								globalConfigContext.rtl ? styleSheet.iconCloseRtl : styleSheet.iconCloseLtr,
+								globalConfigContext.rtl
+									? styleSheet.iconCloseRtl
+									: styleSheet.iconCloseLtr,
+								isApplyInsets && applyInsetsEdges.top
+									? { top: safeAreaInsets.top / 2 }
+									: undefined,
 								buttonCloseProps?.style,
 							] }
 						/>
 
 						{ children }
 					</LayerContext.Provider>
-				</View>
+				</Box>
 			</ModalContext.Provider>
 		)
 
@@ -173,7 +213,7 @@ export const Modal = forwardRef<ModalRef, ModalProps>(
 const
 	styleSheet =
 		StyleSheet.create({
-			headerText: {
+			headerTextContainer: {
 				paddingTop: Spacing.spacing_05,
 				marginBottom: Spacing.spacing_05,
 				rowGap: Spacing.spacing_02,
@@ -193,7 +233,10 @@ const
 	mapStyleSheetBySizeAndBreakpoint: {
 		[Size in ModalSize]: {
 			[Token in BreakpointToken]: {
-				modal: ViewStyle,
+				/**
+				 * Only apply if the modal is inside of dialog context controller
+				 */
+				modalInDialog: ViewStyle,
 				headerTextContainer: ViewStyle,
 			}
 		}
@@ -201,7 +244,7 @@ const
 		{
 			extra_small: {
 				small: StyleSheet.create({
-					modal: {
+					modalInDialog: {
 						width: "100%",
 						height: "100%",
 					},
@@ -210,32 +253,36 @@ const
 					},
 				}),
 				medium: StyleSheet.create({
-					modal: {
+					modalInDialog: {
 						width: "48%",
+						maxHeight: "48%",
 					},
 					headerTextContainer: {
 						paddingHorizontal: Spacing.spacing_05,
 					},
 				}),
 				large: StyleSheet.create({
-					modal: {
+					modalInDialog: {
 						width: "32%",
+						maxHeight: "48%",
 					},
 					headerTextContainer: {
 						paddingHorizontal: Spacing.spacing_05,
 					},
 				}),
 				x_large: StyleSheet.create({
-					modal: {
+					modalInDialog: {
 						width: "24%",
+						maxHeight: "48%",
 					},
 					headerTextContainer: {
 						paddingHorizontal: Spacing.spacing_05,
 					},
 				}),
 				max: StyleSheet.create({
-					modal: {
+					modalInDialog: {
 						width: "24%",
+						maxHeight: "48%",
 					},
 					headerTextContainer: {
 						paddingHorizontal: Spacing.spacing_05,
@@ -244,7 +291,7 @@ const
 			},
 			small: {
 				small: StyleSheet.create({
-					modal: {
+					modalInDialog: {
 						width: "100%",
 						height: "100%",
 					},
@@ -253,24 +300,27 @@ const
 					},
 				}),
 				medium: StyleSheet.create({
-					modal: {
+					modalInDialog: {
 						width: "60%",
+						maxHeight: "72%",
 					},
 					headerTextContainer: {
 						paddingHorizontal: Spacing.spacing_05,
 					},
 				}),
 				large: StyleSheet.create({
-					modal: {
+					modalInDialog: {
 						width: "42%",
+						maxHeight: "72%",
 					},
 					headerTextContainer: {
 						paddingHorizontal: Spacing.spacing_05,
 					},
 				}),
 				x_large: StyleSheet.create({
-					modal: {
+					modalInDialog: {
 						width: "36%",
+						maxHeight: "72%",
 					},
 					headerTextContainer: {
 						paddingStart: Spacing.spacing_05,
@@ -278,8 +328,9 @@ const
 					},
 				}),
 				max: StyleSheet.create({
-					modal: {
+					modalInDialog: {
 						width: "36%",
+						maxHeight: "72%",
 					},
 					headerTextContainer: {
 						paddingStart: Spacing.spacing_05,
@@ -289,7 +340,7 @@ const
 			},
 			medium: {
 				small: StyleSheet.create({
-					modal: {
+					modalInDialog: {
 						width: "100%",
 						height: "100%",
 					},
@@ -298,8 +349,9 @@ const
 					},
 				}),
 				medium: StyleSheet.create({
-					modal: {
+					modalInDialog: {
 						width: "84%",
+						maxHeight: "84%",
 					},
 					headerTextContainer: {
 						paddingStart: Spacing.spacing_05,
@@ -307,8 +359,9 @@ const
 					},
 				}),
 				large: StyleSheet.create({
-					modal: {
+					modalInDialog: {
 						width: "60%",
+						maxHeight: "84%",
 					},
 					headerTextContainer: {
 						paddingStart: Spacing.spacing_05,
@@ -316,8 +369,9 @@ const
 					},
 				}),
 				x_large: StyleSheet.create({
-					modal: {
+					modalInDialog: {
 						width: "48%",
+						maxHeight: "84%",
 					},
 					headerTextContainer: {
 						paddingStart: Spacing.spacing_05,
@@ -325,8 +379,9 @@ const
 					},
 				}),
 				max: StyleSheet.create({
-					modal: {
+					modalInDialog: {
 						width: "48%",
+						maxHeight: "84%",
 					},
 					headerTextContainer: {
 						paddingStart: Spacing.spacing_05,
@@ -336,7 +391,7 @@ const
 			},
 			large: {
 				small: StyleSheet.create({
-					modal: {
+					modalInDialog: {
 						width: "100%",
 						height: "100%",
 					},
@@ -345,8 +400,9 @@ const
 					},
 				}),
 				medium: StyleSheet.create({
-					modal: {
+					modalInDialog: {
 						width: "96%",
+						maxHeight: "96%",
 					},
 					headerTextContainer: {
 						paddingStart: Spacing.spacing_05,
@@ -354,8 +410,9 @@ const
 					},
 				}),
 				large: StyleSheet.create({
-					modal: {
+					modalInDialog: {
 						width: "84%",
+						maxHeight: "96%",
 					},
 					headerTextContainer: {
 						paddingStart: Spacing.spacing_05,
@@ -363,8 +420,9 @@ const
 					},
 				}),
 				x_large: StyleSheet.create({
-					modal: {
+					modalInDialog: {
 						width: "72%",
+						maxHeight: "96%",
 					},
 					headerTextContainer: {
 						paddingStart: Spacing.spacing_05,
@@ -372,8 +430,9 @@ const
 					},
 				}),
 				max: StyleSheet.create({
-					modal: {
+					modalInDialog: {
 						width: "72%",
+						maxHeight: "96%",
 					},
 					headerTextContainer: {
 						paddingStart: Spacing.spacing_05,