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

package/src/components/modal/ModalProps.ts

@@ -1,6 +1,6 @@
 import type {
-	ViewProps,
-} from "react-native"
+	BoxProps,
+} from "../box/BoxProps"
 
 import type {
 	GhostIconProps,
@@ -10,7 +10,7 @@ import type {
 	ModalSize,
 } from "./ModalSize"
 
-export interface ModalProps extends ViewProps {
+export interface ModalProps extends BoxProps {
 	label?: string,
 	title: string,
 	/**
@@ -21,4 +21,41 @@ export interface ModalProps extends ViewProps {
 		GhostIconProps,
 		| "icon"
 	>,
+	/**
+	 * The modal will use react-native-safe-area-context internally to supporting safe areas, but you may want to apply it only for specific situation, e.g. in dialog and small breakpoint. This may only apply to Android, iOS, and Web.
+	 * 
+	 * - `all`:
+	 * Apply insets regardless the conditions. You might want this if you want to render it in full screen with dialog in Android, iOS, and Web platform by override the modal width and height style
+	 * 
+	 * - `in_dialog_and_small_bp`:
+	 * (Default) Apply insets only if the Modal component is rendered in dialog and currently in small breakpoint. Based on IBM spec, this is needed for the modal in the mobile screen. The `Modal` will be height stretched automatically in small breakpoint and in dialog
+	 * 
+	 * - `none`:
+	 * Apply no insets
+	 * 
+	 * This prop may not apply for desktop app. Unless in the future, macOS or Windows with React Native allows us to create an desktop app that will be rendered in full screen or borderless windowed like a video game
+	 * 
+	 * @default "in_dialog_and_small_bp"
+	 */
+	applyInsets?:
+		| "all"
+		| "in_dialog_and_small_bp"
+		| "none",
+	/**
+	 * All edges are applied by default. You probably want this if you want to apply the inset only for specific edges. It only applies if `applyInsets` prop is not undefined or not `none`.
+	 * 
+	 * Note:
+	 * - `left` and `right` edge only apply to the `ModalContent` component
+	 * - `top` edge applies margin style to the modal's header (the title and the close icon)
+	 * - `bottom` edge applies to the modal itself
+	 * 
+	 * Alternative for modal with buttons; You can unapply the bottom inset and use the `Button` component with `2xl` size.
+	 */
+	applyInsetsEdges?: Partial<Record<
+		| "top"
+		| "bottom"
+		| "left"
+		| "right",
+		boolean
+	>>,
 }

package/src/components/modal-content/ModalContent.tsx

@@ -5,7 +5,6 @@ import {
 
 import {
 	StyleSheet,
-	View,
 	type ViewStyle,
 } from "react-native"
 
@@ -15,18 +14,26 @@ import {
 } from "@audira/carbon-react-native-elements"
 
 import {
-	GlobalConfigContext,
+	useSafeAreaInsets,
+} from "react-native-safe-area-context"
+
+import {
+	InDialogContext,
 	ModalContext,
 } from "../../_internal/contexts"
 
 import {
-	CommonStyleSheet,
-} from "../../_internal/style-sheets"
+	ModalHelper,
+} from "../../_internal/helpers"
 
 import {
 	BreakpointContext,
 } from "../../contexts"
 
+import {
+	Box,
+} from "../box"
+
 import type {
 	ModalContentProps,
 } from "./ModalContentProps"
@@ -40,7 +47,6 @@ export const ModalContent = forwardRef<ModalContentRef, ModalContentProps>(
 		{
 			fullWidth,
 			style,
-			dir,
 			...props
 		},
 		ref,
@@ -53,19 +59,35 @@ export const ModalContent = forwardRef<ModalContentRef, ModalContentProps>(
 			modalContext =
 				useContext(ModalContext),
 
-			globalConfigContext =
-				useContext(GlobalConfigContext)
+			inDialogContext =
+				useContext(InDialogContext),
+
+			safeAreaInsets =
+				useSafeAreaInsets(),
+
+			isApplyInsets =
+				ModalHelper.isApplyInsets({
+					applyInsets: modalContext.applyInsets,
+					breakpoint,
+					inDialog: inDialogContext,
+				})
 
 		return (
-			<View
+			<Box
 				ref={ ref }
 				{ ...props }
-				dir={ dir ?? globalConfigContext.rtl ? "rtl" : undefined }
 				style={ [
 					styleSheet.modalContent,
 					mapStyleSheetBySizeAndBreakpoint[modalContext.size][breakpoint],
-					fullWidth ? styleSheet.fullWidth : undefined,
-					globalConfigContext.rtl ? CommonStyleSheet.rtl : undefined,
+					fullWidth
+						? styleSheet.fullWidth
+						: undefined,
+					isApplyInsets
+						? {
+							marginLeft: safeAreaInsets.left,
+							marginRight: safeAreaInsets.right,
+						}
+						: undefined,
 					style,
 				] }
 			/>

package/src/components/notification/_status-hooks/error/useError.tsx

@@ -8,9 +8,7 @@ import {
 
 import Icon from "@carbon/icons/svg/32/error--filled.svg"
 
-import {
-	CarbonStyleSheet,
-} from "../../../../carbon-style-sheet"
+import * as CarbonStyleSheet from "../../../../carbon-style-sheet"
 
 import {
 	ThemeContext,

package/src/components/notification/_status-hooks/informational/useInformational.tsx

@@ -8,9 +8,7 @@ import {
 
 import Icon from "@carbon/icons/svg/32/information--filled.svg"
 
-import {
-	CarbonStyleSheet,
-} from "../../../../carbon-style-sheet"
+import * as CarbonStyleSheet from "../../../../carbon-style-sheet"
 
 import {
 	ThemeContext,

package/src/components/notification/_status-hooks/success/useSuccess.tsx

@@ -8,9 +8,7 @@ import {
 
 import Icon from "@carbon/icons/svg/32/checkmark--filled.svg"
 
-import {
-	CarbonStyleSheet,
-} from "../../../../carbon-style-sheet"
+import * as CarbonStyleSheet from "../../../../carbon-style-sheet"
 
 import {
 	ThemeContext,

package/src/components/notification/_status-hooks/warning/useWarning.tsx

@@ -8,9 +8,7 @@ import {
 
 import Icon from "@carbon/icons/svg/32/warning--filled.svg"
 
-import {
-	CarbonStyleSheet,
-} from "../../../../carbon-style-sheet"
+import * as CarbonStyleSheet from "../../../../carbon-style-sheet"
 
 import {
 	ThemeContext,

package/src/components/notification/_variants/actionable/ActionableVariant.tsx

@@ -43,7 +43,6 @@ export const ActionableVariant = forwardRef<ActionableVariantRef, ActionableVari
 			<VariantContextProvider color={ color }>
 				<Base
 					{ ...props }
-					inline={ false }
 					Icon={ Icon }
 					iconClose
 					body={

package/src/components/notification/_variants/actionable/ActionableVariantProps.ts

@@ -16,9 +16,7 @@ import type {
 
 export interface ActionableVariantProps extends Omit<
 	BaseProps,
-	| "inline"
 	| "body"
-	| "icon"
 	| "iconClose"
 	| "nodes"
 	| "leftContainerStyle"

package/src/components/notification/_variants/callout/CalloutVariant.tsx

@@ -38,7 +38,6 @@ export const CalloutVariant = forwardRef<CalloutVariantRef, CalloutVariantProps>
 			<VariantContextProvider color={ color }>
 				<Base
 					{ ...props }
-					inline={ false }
 					Icon={ Icon }
 					iconClose={ false }
 					body={

package/src/components/notification/_variants/callout/CalloutVariantProps.ts

@@ -12,9 +12,7 @@ import type {
 
 export interface CalloutVariantProps extends Omit<
 	BaseProps,
-	| "inline"
 	| "body"
-	| "icon"
 	| "iconClose"
 	| "nodes"
 	| "leftContainerStyle"

package/src/components/notification/_variants/index.ts

@@ -0,0 +1,3 @@
+export * from "./actionable"
+export * from "./callout"
+export * from "./toast"

package/src/components/notification/_variants/toast/ToastVariantProps.ts

@@ -1,11 +1,11 @@
 import type {
 	NotificationColor,
 } from "../../NotificationColor"
+
 import type {
 	BaseProps,
 } from "../../base/BaseProps"
 
-
 import type {
 	SubtitleProps,
 } from "../../subtitle/SubtitleProps"
@@ -14,7 +14,6 @@ export interface ToastVariantProps extends Omit<
 	BaseProps,
 	| "inline"
 	| "body"
-	| "icon"
 	| "iconClose"
 	| "nodes"
 	| "leftContainerStyle"

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

@@ -20,19 +20,16 @@ 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 {
 	BaseColor as ButtonBaseColor,
 	type BaseColorProps,
@@ -75,7 +72,6 @@ export const Base = forwardRef<BaseRef, BaseProps>(
 			contentContainerStyle,
 
 			style,
-			dir,
 			...props
 		},
 		ref,
@@ -89,12 +85,10 @@ export const Base = forwardRef<BaseRef, BaseProps>(
 				useContext(ThemeContext)
 
 		return (
-			<View
+			<Box
 				{ ...props }
-				dir={ dir ?? globalConfigContext.rtl ? "rtl" : undefined }
 				style={ [
-					FlexStyleSheet.flex_row,
-					globalConfigContext.rtl ? CommonStyleSheet.rtl : undefined,
+					CarbonStyleSheet.g.flex_row,
 					style,
 				] }
 				ref={ ref }
@@ -108,11 +102,11 @@ export const Base = forwardRef<BaseRef, BaseProps>(
 
 				<View
 					style={ [
-						FlexStyleSheet.flex_auto,
-						FlexStyleSheet.flex_row,
+						CarbonStyleSheet.g.flex_auto,
+						CarbonStyleSheet.g.flex_row,
 						!inline
 							? baseStyle.leftContainerNonInline
-							: FlexStyleSheet.items_center,
+							: CarbonStyleSheet.g.items_center,
 						leftContainerStyle,
 					] }
 				>
@@ -136,7 +130,7 @@ export const Base = forwardRef<BaseRef, BaseProps>(
 					{ (!!title || !!body) && (
 						<View
 							style={ [
-								FlexStyleSheet.flex_auto,
+								CarbonStyleSheet.g.flex_auto,
 								contentContainerStyle,
 							] }
 						>
@@ -215,13 +209,13 @@ export const Base = forwardRef<BaseRef, BaseProps>(
 							},
 						}}
 						style={ [
-							FlexStyleSheet.justify_center,
+							CarbonStyleSheet.g.justify_center,
 							baseStyle.buttonIconClose,
 							iconCloseButtonProps?.style,
 						] }
 					/>
 				) }
-			</View>
+			</Box>
 		)
 
 	},

package/src/components/notification/callout/error/ErrorProps.ts

@@ -2,7 +2,7 @@ import type {
 	CalloutVariantProps,
 } from "../../_variants/callout"
 
-export interface ErrorProps extends Omit<CalloutVariantProps, "icon"> {
+export interface ErrorProps extends Omit<CalloutVariantProps, "Icon"> {
 	iconProps?: Omit<
 		NonNullable<CalloutVariantProps["iconProps"]>,
 		| "color"

package/src/components/notification/callout/informational/InformationalProps.ts

@@ -2,7 +2,7 @@ import type {
 	CalloutVariantProps,
 } from "../../_variants/callout"
 
-export interface InformationalProps extends Omit<CalloutVariantProps, "icon"> {
+export interface InformationalProps extends Omit<CalloutVariantProps, "Icon"> {
 	iconProps?: Omit<
 		NonNullable<CalloutVariantProps["iconProps"]>,
 		| "color"

package/src/components/notification/callout/success/SuccessProps.ts

@@ -1,14 +1,14 @@
 import type {
-	CalloutInlineVariantProps,
-} from "../../_variants/callout-inline"
+	CalloutVariantProps,
+} from "../../_variants/callout/CalloutVariantProps"
 
-export interface SuccessProps extends Omit<CalloutInlineVariantProps, "icon"> {
+export interface SuccessProps extends Omit<CalloutVariantProps, "Icon"> {
 	iconProps?: Omit<
-		NonNullable<CalloutInlineVariantProps["iconProps"]>,
+		NonNullable<CalloutVariantProps["iconProps"]>,
 		| "color"
 	>,
 	iconCloseProps?: Omit<
-		NonNullable<CalloutInlineVariantProps["iconCloseProps"]>,
+		NonNullable<CalloutVariantProps["iconCloseProps"]>,
 		| "color"
 	>,
 }

package/src/components/notification/callout/warning/WarningProps.ts

@@ -2,7 +2,7 @@ import type {
 	CalloutVariantProps,
 } from "../../_variants/callout"
 
-export interface WarningProps extends Omit<CalloutVariantProps, "icon"> {
+export interface WarningProps extends Omit<CalloutVariantProps, "Icon"> {
 	iconProps?: Omit<
 		NonNullable<CalloutVariantProps["iconProps"]>,
 		| "color"

package/src/components/notification/index.ts

@@ -0,0 +1,14 @@
+import * as Actionable from "./actionable"
+import * as Callout from "./callout"
+import * as Toast from "./toast"
+
+export {
+	Actionable,
+	Callout,
+	Toast,
+}
+
+export * from "./base"
+export * from "./NotificationColor"
+export * from "./subtitle"
+export * from "./subtitle-link"

package/src/components/notification/subtitle/Subtitle.tsx

@@ -3,9 +3,7 @@ import {
 	useContext,
 } from "react"
 
-import {
-	CarbonStyleSheet,
-} from "../../../carbon-style-sheet"
+import * as CarbonStyleSheet from "../../../carbon-style-sheet"
 
 import {
 	ThemeContext,

package/src/components/notification/subtitle-link/SubtitleLink.tsx

@@ -3,9 +3,7 @@ import {
 	useContext,
 } from "react"
 
-import {
-	CarbonStyleSheet,
-} from "../../../carbon-style-sheet"
+import * as CarbonStyleSheet from "../../../carbon-style-sheet"
 
 import {
 	ThemeContext,

package/src/components/notification/toast/success/SuccessProps.ts

@@ -1,14 +1,14 @@
 import type {
-	CalloutInlineVariantProps,
-} from "../../_variants/callout-inline"
+	ToastVariantProps,
+} from "../../_variants/toast"
 
-export interface SuccessProps extends Omit<CalloutInlineVariantProps, "Icon"> {
+export interface SuccessProps extends Omit<ToastVariantProps, "Icon"> {
 	iconProps?: Omit<
-		NonNullable<CalloutInlineVariantProps["iconProps"]>,
+		NonNullable<ToastVariantProps["iconProps"]>,
 		| "color"
 	>,
 	iconCloseProps?: Omit<
-		NonNullable<CalloutInlineVariantProps["iconCloseProps"]>,
+		NonNullable<ToastVariantProps["iconCloseProps"]>,
 		| "color"
 	>,
 }

package/src/components/notification/toast/success/SuccessRef.ts

@@ -1,6 +1,6 @@
 import type {
-	CalloutInlineVariantRef,
-} from "../../_variants/callout-inline"
+	ToastVariantRef,
+} from "../../_variants/toast/ToastVariantRef"
 
-export interface SuccessRef extends CalloutInlineVariantRef {
+export interface SuccessRef extends ToastVariantRef {
 }

package/src/components/password-input/PasswordInput.tsx

@@ -0,0 +1,61 @@
+import {
+	forwardRef,
+} from "react"
+
+import {
+	SecureTextEntryControlHook,
+} from "../../_internal/hooks"
+
+import {
+	GhostIcon,
+} from "../password-input-field/_ghost-icon"
+
+import {
+	TextInput,
+} from "../text-input"
+
+import type {
+	PasswordInputProps,
+} from "./PasswordInputProps"
+
+import type {
+	PasswordInputRef,
+} from "./PasswordInputRef"
+
+export const PasswordInput = forwardRef<PasswordInputRef, PasswordInputProps>(
+	function PasswordInput(
+		{
+			autoComplete = "current-password",
+			size = "medium",
+			secureTextEntry: secureTextEntryProp,
+			blockEndNode,
+			...props
+		},
+		ref,
+	) {
+
+		const
+			[secureTextEntry, toggleSecureTextEntrySelf] =
+				SecureTextEntryControlHook.use(secureTextEntryProp)
+
+		return (
+			<TextInput
+				ref={ ref }
+				{ ...props }
+				autoComplete={ autoComplete }
+				size={ size }
+				secureTextEntry={ secureTextEntry }
+				blockEndNode={ (<>
+					<GhostIcon
+						inputSize={ size }
+						secureTextEntry={ secureTextEntry }
+						onPress={ toggleSecureTextEntrySelf }
+					/>
+
+					{ blockEndNode }
+				</>) }
+			/>
+		)
+
+	},
+)

package/src/components/password-input/PasswordInputProps.ts

@@ -0,0 +1,6 @@
+import type {
+	TextInputProps,
+} from "../text-input/TextInputProps"
+
+export interface PasswordInputProps extends TextInputProps {
+}

package/src/components/password-input/PasswordInputRef.ts

@@ -0,0 +1,6 @@
+import type {
+	TextInputRef,
+} from "../text-input/TextInputRef"
+
+export interface PasswordInputRef extends TextInputRef {
+}

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

@@ -0,0 +1,3 @@
+export * from "./PasswordInput"
+export type * from "./PasswordInputProps"
+export type * from "./PasswordInputRef"

package/src/components/password-input-field/PasswordInputField.tsx

@@ -0,0 +1,61 @@
+import {
+	forwardRef,
+} from "react"
+
+import {
+	SecureTextEntryControlHook,
+} from "../../_internal/hooks"
+
+import {
+	TextInputField,
+} from "../text-input-field"
+
+import type {
+	PasswordInputFieldProps,
+} from "./PasswordInputFieldProps"
+
+import type {
+	PasswordInputFieldRef,
+} from "./PasswordInputFieldRef"
+
+import {
+	GhostIcon,
+} from "./_ghost-icon"
+
+export const PasswordInputField = forwardRef<PasswordInputFieldRef, PasswordInputFieldProps>(
+	function PasswordInputField(
+		{
+			autoComplete = "current-password",
+			size = "medium",
+			secureTextEntry: secureTextEntryProp,
+			blockEndNode,
+			...props
+		},
+		ref,
+	) {
+
+		const
+			[secureTextEntry, toggleSecureTextEntrySelf] =
+				SecureTextEntryControlHook.use(secureTextEntryProp)
+
+		return (
+			<TextInputField
+				ref={ ref }
+				{ ...props }
+				autoComplete={ autoComplete }
+				size={ size }
+				secureTextEntry={ secureTextEntry }
+				blockEndNode={ (<>
+					<GhostIcon
+						inputSize={ size }
+						secureTextEntry={ secureTextEntry }
+						onPress={ toggleSecureTextEntrySelf }
+					/>
+
+					{ blockEndNode }
+				</>) }
+			/>
+		)
+
+	},
+)

package/src/components/password-input-field/PasswordInputFieldProps.ts

@@ -0,0 +1,6 @@
+import type {
+	TextInputFieldProps,
+} from "../text-input-field/TextInputFieldProps"
+
+export interface PasswordInputFieldProps extends TextInputFieldProps {
+}

package/src/components/password-input-field/PasswordInputFieldRef.tsx

@@ -0,0 +1,6 @@
+import type {
+	TextInputFieldRef,
+} from "../text-input-field/TextInputFieldRef"
+
+export interface PasswordInputFieldRef extends TextInputFieldRef {
+}