@utilitywarehouse/hearth-react-native 0.16.2 → 0.17.0

package/build/components/Input/Input.js

@@ -3,6 +3,7 @@ import { createInput } from '@gluestack-ui/input';
 import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { CloseSmallIcon, EyeOffSmallIcon, EyeSmallIcon, SearchMediumIcon, } from '@utilitywarehouse/hearth-react-native-icons';
 import { useTheme } from '../../hooks';
+import { BodyText } from '../BodyText';
 import { FormField, useFormFieldContext } from '../FormField';
 import { Spinner } from '../Spinner';
 import { UnstyledIconButton } from '../UnstyledIconButton';
@@ -19,7 +20,7 @@ export const InputComponent = createInput({
 export const InputSlot = InputComponent.Slot;
 export const InputField = InputComponent.Input;
 export const InputIcon = InputComponent.Icon;
-const Input = forwardRef(({ validationStatus = 'initial', children, disabled, focused, readonly, leadingIcon, trailingIcon, type, showPasswordToggle = true, onClear, loading, clearable = false, required = true, inBottomSheet = false, style, label, labelVariant, helperText, helperIcon, validText, invalidText, ...props }, ref) => {
+const Input = forwardRef(({ validationStatus = 'initial', children, disabled, focused, readonly, leadingIcon, trailingIcon, type, showPasswordToggle = true, onClear, loading, clearable = false, required = true, inBottomSheet = false, style, label, labelVariant, helperText, helperIcon, validText, invalidText, prefix, suffix, ...props }, ref) => {
     const formFieldContext = useFormFieldContext();
     const inputLabel = label ?? formFieldContext?.label;
     const inputHelperText = helperText ?? formFieldContext?.helperText;
@@ -84,11 +85,11 @@ const Input = forwardRef(({ validationStatus = 'initial', children, disabled, fo
         }
         return accessibilityHint || props.accessibilityHint;
     };
-    return (_jsx(FormField, { label: label, labelVariant: labelVariant, helperText: helperText, helperIcon: helperIcon, validText: validText, invalidText: invalidText, required: required, validationStatus: validationStatus, disabled: disabled, readonly: readonly, accessibilityHandledByChildren: true, children: _jsx(InputComponent, { ...(children ? props : {}), validationStatus: inputValidationStatus, isInvalid: inputValidationStatus === 'invalid', isReadOnly: inputReadonly, isDisabled: inputDisabled, isFocused: focused, type: type, isRequired: inputRequired, style: style, children: children ? (_jsx(_Fragment, { children: children })) : (_jsxs(_Fragment, { children: [!!leadingIconComponent && (_jsx(InputSlot, { children: _jsx(InputIcon, { as: leadingIconComponent }) })), _jsx(InputField
+    return (_jsx(FormField, { label: label, labelVariant: labelVariant, helperText: helperText, helperIcon: helperIcon, validText: validText, invalidText: invalidText, required: required, validationStatus: validationStatus, disabled: disabled, readonly: readonly, accessibilityHandledByChildren: true, children: _jsx(InputComponent, { ...(children ? props : {}), validationStatus: inputValidationStatus, isInvalid: inputValidationStatus === 'invalid', isReadOnly: inputReadonly, isDisabled: inputDisabled, isFocused: focused, type: type, isRequired: inputRequired, style: style, children: children ? (_jsx(_Fragment, { children: children })) : (_jsxs(_Fragment, { children: [!!leadingIconComponent && (_jsx(InputSlot, { children: _jsx(InputIcon, { as: leadingIconComponent }) })), !!prefix && (_jsx(InputSlot, { children: typeof prefix === 'string' || typeof prefix === 'number' ? (_jsx(BodyText, { children: prefix })) : (prefix) })), _jsx(InputField
                     // @ts-expect-error - ref forwarding issue
                     , { 
                         // @ts-expect-error - ref forwarding issue
-                        ref: inputRef, type: fieldType, inputMode: getInputMode, inBottomSheet: inBottomSheet, ...props, "aria-label": getAccessibilityLabel(), accessibilityHint: getAccessibilityHint() }), shouldShowClear && (_jsx(InputSlot, { children: _jsx(UnstyledIconButton, { onPress: onClear, icon: CloseSmallIcon }) })), loading && (_jsx(InputSlot, { children: _jsx(Spinner, { size: "xs", color: color.icon.primary }) })), shouldShowPasswordToggle && (_jsx(InputSlot, { children: _jsx(UnstyledIconButton, { onPress: toggleFieldType, icon: fieldType === 'password' ? EyeSmallIcon : EyeOffSmallIcon }) })), !!trailingIcon && (_jsx(InputSlot, { children: _jsx(InputIcon, { as: trailingIcon }) }))] })) }) }));
+                        ref: inputRef, type: fieldType, inputMode: getInputMode, inBottomSheet: inBottomSheet, ...props, "aria-label": getAccessibilityLabel(), accessibilityHint: getAccessibilityHint() }), shouldShowClear && (_jsx(InputSlot, { children: _jsx(UnstyledIconButton, { onPress: onClear, icon: CloseSmallIcon }) })), loading && (_jsx(InputSlot, { children: _jsx(Spinner, { size: "xs", color: color.icon.primary }) })), shouldShowPasswordToggle && (_jsx(InputSlot, { children: _jsx(UnstyledIconButton, { onPress: toggleFieldType, icon: fieldType === 'password' ? EyeSmallIcon : EyeOffSmallIcon }) })), !!suffix && (_jsx(InputSlot, { children: typeof suffix === 'string' || typeof suffix === 'number' ? (_jsx(BodyText, { children: suffix })) : (suffix) })), !!trailingIcon && (_jsx(InputSlot, { children: _jsx(InputIcon, { as: trailingIcon }) }))] })) }) }));
 });
 Input.displayName = 'Input';
 export default Input;

package/build/components/Input/Input.props.d.ts

@@ -1,4 +1,5 @@
 import type { ComponentType } from 'react';
+import React from 'react';
 import type { TextInputProps, ViewProps } from 'react-native';
 export interface InputBaseProps {
     /**
@@ -43,12 +44,16 @@ export interface InputWithChildrenProps extends InputBaseProps, ViewProps {
     onClear?: never;
     leadingIcon?: never;
     trailingIcon?: never;
+    prefix?: never;
+    suffix?: never;
 }
 interface InputWithoutChildrenBaseProps extends InputBaseProps, Omit<TextInputProps, 'children'> {
     children?: never;
     leadingIcon?: ComponentType;
     trailingIcon?: ComponentType;
     required?: boolean;
+    prefix?: string | number | React.ReactNode;
+    suffix?: string | number | React.ReactNode;
 }
 interface TextInputSpecificProps extends InputWithoutChildrenBaseProps {
     type?: 'text';
@@ -65,6 +70,8 @@ interface PasswordInputSpecificProps extends InputWithoutChildrenBaseProps {
     loading?: never;
     clearable?: never;
     onClear?: never;
+    prefix?: never;
+    suffix?: never;
 }
 interface SearchInputSpecificProps extends InputWithoutChildrenBaseProps {
     type: 'search';
@@ -73,6 +80,8 @@ interface SearchInputSpecificProps extends InputWithoutChildrenBaseProps {
     onClear?: () => void;
     showPasswordToggle?: never;
     format?: never;
+    prefix?: never;
+    suffix?: never;
 }
 export type InputWithoutChildrenProps = TextInputSpecificProps | PasswordInputSpecificProps | SearchInputSpecificProps;
 /**

package/build/components/List/List.context.d.ts

@@ -3,11 +3,13 @@ export declare const ListContext: import("react").Context<{
     loading?: ListProps["loading"];
     disabled?: ListProps["disabled"];
     container?: ListProps["container"];
+    firstItemId?: string;
+    registerItem?: (id: string) => () => void;
 }>;
 export declare const useListContext: () => {
     loading?: ListProps["loading"];
     disabled?: ListProps["disabled"];
     container?: ListProps["container"];
+    firstItemId?: string;
+    registerItem?: (id: string) => () => void;
 };
-export declare const ListFirstItemContext: import("react").Context<boolean>;
-export declare const useListFirstItemContext: () => boolean;

package/build/components/List/List.context.js

@@ -4,5 +4,3 @@ export const useListContext = () => {
     const context = useContext(ListContext);
     return context;
 };
-export const ListFirstItemContext = createContext(false);
-export const useListFirstItemContext = () => useContext(ListFirstItemContext);

package/build/components/List/List.d.ts

@@ -1,6 +1,6 @@
 import type ListProps from './List.props';
 declare const List: {
-    ({ children, heading, helperText, headerTrailingContent, ...props }: ListProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, heading, helperText, headerTrailingContent, invalidText, ...props }: ListProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default List;

package/build/components/List/List.js

@@ -1,54 +1,41 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useMemo } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { Card } from '../Card';
 import { SectionHeader } from '../SectionHeader';
-import { ListContext, ListFirstItemContext } from './List.context';
-import { ListAction } from './ListAction';
-import { ListItem } from './ListItem';
-const markFirstListItem = (children) => {
-    let found = false;
-    const recursiveClone = (children) => {
-        return React.Children.map(children, (child) => {
-            if (!React.isValidElement(child))
-                return child;
-            // Check if the current element is the ListItem or ListAction and hasn't been marked yet
-            if (!found) {
-                if (child.type === ListItem || child.type === ListAction) {
-                    found = true;
-                    return (_jsx(ListFirstItemContext.Provider, { value: true, children: child }));
-                }
-                // If the child has nested children, process them recursively
-                if (React.isValidElement(child) &&
-                    child.props &&
-                    typeof child.props === 'object' &&
-                    child.props !== null &&
-                    'children' in child.props &&
-                    child.props.children) {
-                    const clonedChildren = recursiveClone(child.props.children);
-                    return React.cloneElement(child, { children: clonedChildren });
-                }
-                found = true;
-                return _jsx(ListFirstItemContext.Provider, { value: true, children: child });
-            }
-            return child;
-        });
-    };
-    return recursiveClone(children);
-};
-const List = ({ children, heading, helperText, headerTrailingContent, ...props }) => {
+import { ListContext } from './List.context';
+const List = ({ children, heading, helperText, headerTrailingContent, invalidText, ...props }) => {
     const { loading, disabled, container = 'none' } = props;
+    const orderRef = useRef([]);
+    const [firstItemId, setFirstItemId] = useState(undefined);
     const containerToCard = {
         variant: container === 'subtleWhite' || container === 'subtleWarmWhite' ? 'subtle' : 'emphasis',
         colorScheme: container === 'subtleWhite' || container === 'emphasisWhite'
             ? 'neutralStrong'
             : 'neutralSubtle',
     };
-    const updatedChildren = markFirstListItem(children);
-    const value = useMemo(() => ({ loading, disabled, container }), [loading, disabled, container]);
+    const registerItem = useCallback((id) => {
+        if (!orderRef.current.includes(id)) {
+            orderRef.current.push(id);
+        }
+        const nextFirst = orderRef.current[0];
+        setFirstItemId(prev => (prev === nextFirst ? prev : nextFirst));
+        return () => {
+            orderRef.current = orderRef.current.filter(currentId => currentId !== id);
+            const nextFirst = orderRef.current[0];
+            setFirstItemId(prev => (prev === nextFirst ? prev : nextFirst));
+        };
+    }, []);
+    const value = {
+        loading,
+        disabled,
+        container,
+        firstItemId,
+        registerItem,
+    };
     styles.useVariants({ disabled });
-    return (_jsx(ListContext.Provider, { value: value, children: _jsxs(View, { ...props, style: [styles.container, props.style], children: [heading ? (_jsx(SectionHeader, { heading: heading, helperText: helperText, trailingContent: headerTrailingContent })) : null, container === 'none' ? (_jsx(View, { children: updatedChildren })) : (React.Children.count(updatedChildren) > 0 && (_jsx(Card, { ...containerToCard, noPadding: true, style: styles.card, children: _jsx(_Fragment, { children: updatedChildren }) })))] }) }));
+    return (_jsx(ListContext.Provider, { value: value, children: _jsxs(View, { ...props, style: [styles.container, props.style], children: [heading ? (_jsx(SectionHeader, { heading: heading, helperText: helperText, trailingContent: headerTrailingContent, invalidText: invalidText })) : null, container === 'none' ? (_jsx(View, { children: children })) : (React.Children.count(children) > 0 && (_jsx(Card, { ...containerToCard, noPadding: true, style: styles.card, children: _jsx(_Fragment, { children: children }) })))] }) }));
 };
 List.displayName = 'List';
 const styles = StyleSheet.create(theme => ({

package/build/components/List/List.props.d.ts

@@ -6,5 +6,6 @@ interface ListProps extends ViewProps {
     headerTrailingContent?: React.ReactNode;
     disabled?: boolean;
     loading?: boolean;
+    invalidText?: string;
 }
 export default ListProps;

package/build/components/List/ListAction/ListAction.js

@@ -1,17 +1,19 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { createPressable } from '@gluestack-ui/pressable';
 import { ChevronRightSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { Pressable } from 'react-native';
+import { useId, useLayoutEffect } from 'react';
+import { Pressable, View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import { useListContext, useListFirstItemContext } from '../List.context';
+import { Skeleton } from '../../Skeleton';
+import { useListContext } from '../List.context';
 import ListActionContent from './ListActionContent';
 import ListActionText from './ListActionText';
 import ListActionTrailingContent from './ListActionTrailingContent';
 import ListActionTrailingIcon from './ListActionTrailingIcon';
-const ListActionRoot = ({ heading, disabled, variant = 'subtle', ...props }) => {
+const ListActionRoot = ({ heading, disabled, variant = 'subtle', loading, ...props }) => {
     const { onPress } = props;
     const listContext = useListContext();
-    const isFirstContext = useListFirstItemContext();
+    const { registerItem, firstItemId } = listContext;
     const { active } = props.states || { active: false };
     const getListContainer = () => {
         if (listContext?.container?.includes('subtle')) {
@@ -24,16 +26,24 @@ const ListActionRoot = ({ heading, disabled, variant = 'subtle', ...props }) =>
     };
     const isDisabled = disabled || listContext?.disabled || false;
     const listItemVariant = getListContainer() || variant;
+    const actionId = useId();
+    useLayoutEffect(() => {
+        if (!registerItem) {
+            return;
+        }
+        return registerItem(actionId);
+    }, [actionId, registerItem]);
+    const isFirstChild = firstItemId === actionId;
     const testID = props.testID || 'list-action';
     styles.useVariants({
         variant: listItemVariant,
         disabled: isDisabled,
         active,
         showDisabled: !listContext?.disabled && disabled,
-        isFirstChild: isFirstContext,
+        isFirstChild,
         container: listContext?.container,
     });
-    return (_jsxs(Pressable, { ...props, testID: testID, style: [styles.container, props.style], disabled: isDisabled || !onPress, children: [_jsx(ListActionContent, { children: _jsx(ListActionText, { children: heading }) }), _jsx(ListActionTrailingContent, { style: styles.centeredTrailingIcon, children: _jsx(ListActionTrailingIcon, { as: ChevronRightSmallIcon }) })] }));
+    return (_jsx(Pressable, { ...props, testID: testID, style: [styles.container, props.style], disabled: isDisabled || !onPress, children: loading ? (_jsxs(View, { style: styles.loadingWrap, children: [_jsx(Skeleton, { style: { flex: 1, maxWidth: 166 }, width: "auto", height: 24, borderRadius: "sm" }), _jsx(Skeleton, { width: 24, height: 24, borderRadius: "sm" })] })) : (_jsxs(_Fragment, { children: [_jsx(ListActionContent, { children: _jsx(ListActionText, { children: heading }) }), _jsx(ListActionTrailingContent, { style: styles.centeredTrailingIcon, children: _jsx(ListActionTrailingIcon, { as: ChevronRightSmallIcon }) })] })) }));
 };
 const ListAction = createPressable({
     Root: ListActionRoot,
@@ -100,5 +110,12 @@ const styles = StyleSheet.create(theme => ({
     centeredTrailingIcon: {
         justifyContent: 'center',
     },
+    loadingWrap: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        width: '100%',
+        gap: theme.space['200'],
+    },
 }));
 export default ListAction;

package/build/components/List/ListAction/ListAction.props.d.ts

@@ -2,6 +2,7 @@ import type { PressableProps } from 'react-native';
 interface ListActionProps extends Omit<PressableProps, 'children'> {
     heading: string;
     disabled?: boolean;
+    loading?: boolean;
     variant?: 'subtle' | 'emphasis';
 }
 export default ListActionProps;

package/build/components/List/ListItem/ListItemRoot.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { ChevronRightSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { useMemo } from 'react';
+import { useId, useLayoutEffect, useMemo } from 'react';
 import { Pressable } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { DetailText } from '../../DetailText';
 import { Skeleton } from '../../Skeleton';
-import { useListContext, useListFirstItemContext } from '../List.context';
+import { useListContext } from '../List.context';
 import { ListItemContext } from './ListItem.context';
 import ListItemContent from './ListItemContent';
 import ListItemHeading from './ListItemHeading';
@@ -16,8 +16,16 @@ import ListItemTrailingIcon from './ListItemTrailingIcon';
 const ListItemRoot = ({ heading, helperText, leadingContent, trailingContent, disabled, loading, children, states, variant = 'subtle', badge, badgePosition = 'bottom', numericValue, truncateHeading = false, truncateHelperText = false, ...props }) => {
     const { onPress } = props;
     const listContext = useListContext();
-    const isFirstContext = useListFirstItemContext();
+    const { registerItem, firstItemId } = listContext;
     const { active } = states || { active: false };
+    const itemId = useId();
+    useLayoutEffect(() => {
+        if (!registerItem) {
+            return;
+        }
+        return registerItem(itemId);
+    }, [itemId, registerItem]);
+    const isFirstChild = firstItemId === itemId;
     const getListContainer = () => {
         if (listContext?.container?.includes('subtle')) {
             return 'subtle';
@@ -39,7 +47,7 @@ const ListItemRoot = ({ heading, helperText, leadingContent, trailingContent, di
         active,
         disabled: isDisabled || isLoading,
         showDisabled: !listContext.disabled && disabled,
-        isFirstChild: isFirstContext,
+        isFirstChild,
         container: listContext?.container,
     });
     const value = useMemo(() => {

package/build/utils/isThemedImageProps.d.ts

@@ -1,4 +1,4 @@
 import { ImageProps } from 'react-native';
-import { ThemedImageProps } from 'src/components';
+import { ThemedImageProps } from '../components';
 declare const isThemedImageProps: (props: ThemedImageProps | ImageProps) => props is ThemedImageProps;
 export default isThemedImageProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.16.2",
+  "version": "0.17.0",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -55,10 +55,10 @@
     "vite": "^7.1.3",
     "vite-plugin-svgr": "^4.5.0",
     "vitest": "^3.2.4",
-    "@utilitywarehouse/hearth-react-icons": "^0.7.4",
+    "@utilitywarehouse/hearth-fonts": "^0.0.4",
     "@utilitywarehouse/hearth-react-native-icons": "^0.7.4",
+    "@utilitywarehouse/hearth-react-icons": "^0.7.4",
     "@utilitywarehouse/hearth-svg-assets": "^0.3.0",
-    "@utilitywarehouse/hearth-fonts": "^0.0.4",
     "@utilitywarehouse/hearth-tokens": "^0.2.2"
   },
   "peerDependencies": {