@utilitywarehouse/hearth-react-native 0.27.2 → 0.28.0-testid-fix-1

package/build/components/Table/TableCell.d.ts

@@ -0,0 +1,10 @@
+import { TableCellProps } from './Table.props';
+declare const TableCell: {
+    ({ children, style, ...props }: TableCellProps & {
+        columnIndex?: number;
+        isLast?: boolean;
+        isLastRow?: boolean;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default TableCell;

package/build/components/Table/TableCell.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { BodyText } from '../BodyText';
+import { useTableContext } from './Table.context';
+import { getColumnStyle } from './Table.utils';
+const renderContent = (children, weight = 'regular') => {
+    if (typeof children === 'string' || typeof children === 'number') {
+        return (_jsx(BodyText, { size: "md", weight: weight, children: children }));
+    }
+    return children;
+};
+const TableCell = ({ children, style, ...props }) => {
+    const { columnWidths, container, hasPagination } = useTableContext();
+    const { columnIndex = 0, isLast, isLastRow, ...rest } = props;
+    const removeBottomBorder = Boolean(isLastRow && container !== 'none' && !hasPagination);
+    const columnStyle = getColumnStyle(columnWidths[columnIndex], 120);
+    return (_jsx(View, { ...rest, style: [
+            styles.cell,
+            columnStyle,
+            isLast && styles.lastCell,
+            removeBottomBorder && styles.lastRowCell,
+            style,
+        ], children: renderContent(children) }));
+};
+TableCell.displayName = 'TableCell';
+const styles = StyleSheet.create(theme => ({
+    cell: {
+        minHeight: theme.components.table.cell.minHeight,
+        justifyContent: 'center',
+        padding: theme.components.table.cell.padding,
+        borderRightWidth: theme.components.table.cell.borderWidth,
+        borderBottomWidth: theme.components.table.cell.borderWidth,
+        borderColor: theme.color.border.subtle,
+        backgroundColor: theme.color.surface.neutral.strong,
+    },
+    lastCell: {
+        borderRightWidth: 0,
+    },
+    lastRowCell: {
+        borderBottomWidth: 0,
+    },
+}));
+export default TableCell;

package/build/components/Table/TableHeader.d.ts

@@ -0,0 +1,6 @@
+import { TableHeaderProps } from './Table.props';
+declare const TableHeader: {
+    ({ children, color, style, ...props }: TableHeaderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default TableHeader;

package/build/components/Table/TableHeader.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children, cloneElement, isValidElement } from 'react';
+import { View } from 'react-native';
+const TableHeader = ({ children, color = 'purple', style, ...props }) => {
+    const items = Children.toArray(children);
+    return (_jsx(View, { ...props, style: [styles.header, style], children: items.map((child, index) => {
+            if (!isValidElement(child)) {
+                return child;
+            }
+            return cloneElement(child, {
+                color,
+                columnIndex: index,
+                isLast: index === items.length - 1,
+            });
+        }) }));
+};
+TableHeader.displayName = 'TableHeader';
+const styles = {
+    header: {
+        flexDirection: 'row',
+        width: '100%',
+    },
+};
+export default TableHeader;

package/build/components/Table/TableHeaderCell.d.ts

@@ -0,0 +1,10 @@
+import type { TableHeaderCellProps } from './Table.props';
+declare const TableHeaderCell: {
+    ({ children, color, row, style, trailingContent, ...props }: TableHeaderCellProps & {
+        columnIndex?: number;
+        isLast?: boolean;
+        isLastRow?: boolean;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default TableHeaderCell;

package/build/components/Table/TableHeaderCell.js

@@ -0,0 +1,97 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneElement, isValidElement } from 'react';
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { BodyText } from '../BodyText';
+import { useTableContext } from './Table.context';
+import { getColumnStyle } from './Table.utils';
+const renderContent = (children, weight = 'semibold', color = 'white') => {
+    if (typeof children === 'string' || typeof children === 'number') {
+        return (_jsx(BodyText, { size: "md", weight: weight, style: styles.text, inverted: color === 'purple', children: children }));
+    }
+    return children;
+};
+const TableHeaderCell = ({ children, color = 'white', row = false, style, trailingContent, ...props }) => {
+    const { columnWidths, container, hasPagination } = useTableContext();
+    const { columnIndex = 0, isLast, isLastRow, ...rest } = props;
+    const removeBottomBorder = Boolean(row && isLastRow && container !== 'none' && !hasPagination);
+    const columnStyle = getColumnStyle(columnWidths[columnIndex], 120);
+    styles.useVariants({ color, row });
+    const trailingElement = trailingContent && isValidElement(trailingContent)
+        ? trailingContent
+        : null;
+    const resolvedTrailingContent = trailingElement && !row && 'inverted' in (trailingElement.props ?? {})
+        ? cloneElement(trailingElement, {
+            inverted: color === 'purple',
+        })
+        : trailingContent;
+    return (_jsx(View, { ...rest, style: [
+            styles.cell,
+            columnStyle,
+            isLast && styles.lastCell,
+            removeBottomBorder && styles.lastRowCell,
+            style,
+        ], children: _jsxs(View, { style: styles.content, children: [renderContent(children, 'semibold', color), resolvedTrailingContent ? (_jsx(View, { style: styles.trailing, children: resolvedTrailingContent })) : null] }) }));
+};
+TableHeaderCell.displayName = 'TableHeaderCell';
+const styles = StyleSheet.create(theme => ({
+    cell: {
+        minHeight: theme.components.table.headerCell.height,
+        justifyContent: 'center',
+        paddingHorizontal: theme.components.table.headerCell.paddingHorizontal,
+        paddingVertical: theme.components.table.headerCell.paddingVertical,
+        borderRightWidth: theme.components.table.headerCell.borderWidth,
+        borderBottomWidth: theme.components.table.headerCell.borderWidth,
+        borderColor: theme.color.border.subtle,
+        backgroundColor: theme.color.surface.neutral.strong,
+        variants: {
+            color: {
+                purple: {
+                    borderColor: theme.color.interactive.brand.foreground.strong,
+                    backgroundColor: theme.color.surface.brand.default,
+                },
+                white: {
+                    borderColor: theme.color.border.subtle,
+                    backgroundColor: theme.color.surface.neutral.strong,
+                },
+            },
+            row: {
+                true: {
+                    minHeight: theme.components.table.cell.minHeight,
+                    paddingHorizontal: theme.components.table.cell.padding,
+                    paddingVertical: theme.components.table.cell.padding,
+                    borderRightWidth: theme.components.table.cell.borderWidth,
+                    borderBottomWidth: theme.components.table.cell.borderWidth,
+                    borderColor: theme.color.border.subtle,
+                    backgroundColor: theme.color.surface.neutral.strong,
+                },
+            },
+        },
+    },
+    lastCell: {
+        borderRightWidth: 0,
+    },
+    lastRowCell: {
+        borderBottomWidth: 0,
+    },
+    content: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: theme.components.table.headerCell.gap,
+    },
+    trailing: {
+        flexShrink: 0,
+    },
+    text: {
+        flexShrink: 1,
+        variants: {
+            row: {
+                true: {
+                    color: theme.color.text.primary,
+                },
+            },
+        },
+    },
+}));
+export default TableHeaderCell;

package/build/components/Table/TablePagination.d.ts

@@ -0,0 +1,6 @@
+import type { TablePaginationProps } from './Table.props';
+declare const TablePagination: {
+    (props: TablePaginationProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default TablePagination;

package/build/components/Table/TablePagination.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Pagination } from '../Pagination';
+const TablePagination = (props) => {
+    return _jsx(Pagination, { ...props });
+};
+TablePagination.displayName = 'TablePagination';
+export default TablePagination;

package/build/components/Table/TableRow.d.ts

@@ -0,0 +1,8 @@
+import { TableRowProps } from './Table.props';
+declare const TableRow: {
+    ({ children, ...props }: TableRowProps & {
+        isLastRow?: boolean;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default TableRow;

package/build/components/Table/TableRow.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children, cloneElement, isValidElement } from 'react';
+import { View } from 'react-native';
+const TableRow = ({ children, ...props }) => {
+    const items = Children.toArray(children);
+    const { isLastRow = false, ...rest } = props;
+    return (_jsx(View, { ...rest, style: [styles.row, rest.style], children: items.map((child, index) => {
+            if (!isValidElement(child)) {
+                return child;
+            }
+            return cloneElement(child, {
+                isLast: index === items.length - 1,
+                columnIndex: index,
+                isLastRow,
+            });
+        }) }));
+};
+TableRow.displayName = 'TableRow';
+const styles = {
+    row: {
+        flexDirection: 'row',
+        width: '100%',
+    },
+};
+export default TableRow;

package/build/components/Table/index.d.ts

@@ -0,0 +1,8 @@
+export { default as Table } from './Table';
+export type { TableBodyProps, TableCellProps, TableHeaderCellProps, TableHeaderProps, TablePaginationProps, TableProps, TableRowProps, } from './Table.props';
+export { default as TableBody } from './TableBody';
+export { default as TableCell } from './TableCell';
+export { default as TableHeader } from './TableHeader';
+export { default as TableHeaderCell } from './TableHeaderCell';
+export { default as TablePagination } from './TablePagination';
+export { default as TableRow } from './TableRow';

package/build/components/Table/index.js

@@ -0,0 +1,7 @@
+export { default as Table } from './Table';
+export { default as TableBody } from './TableBody';
+export { default as TableCell } from './TableCell';
+export { default as TableHeader } from './TableHeader';
+export { default as TableHeaderCell } from './TableHeaderCell';
+export { default as TablePagination } from './TablePagination';
+export { default as TableRow } from './TableRow';

package/build/components/Timeline/Timeline.d.ts

@@ -0,0 +1,6 @@
+import type { TimelineProps } from './Timeline.props';
+declare const Timeline: {
+    ({ children, variant, style, ...rest }: TimelineProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default Timeline;

package/build/components/Timeline/Timeline.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+const getItemPosition = (index, count) => {
+    if (count <= 1) {
+        return 'single';
+    }
+    if (index === 0) {
+        return 'start';
+    }
+    if (index === count - 1) {
+        return 'end';
+    }
+    return 'middle';
+};
+const Timeline = ({ children, variant = 'static', style, ...rest }) => {
+    const childElements = React.Children.toArray(children).filter(React.isValidElement);
+    return (_jsx(View, { accessibilityRole: "list", style: [styles.root, style], ...rest, children: childElements.map((child, index) => {
+            const position = getItemPosition(index, childElements.length);
+            return React.cloneElement(child, {
+                key: child.key ?? `timeline-item-${index}`,
+                position,
+                variant,
+            });
+        }) }));
+};
+Timeline.displayName = 'Timeline';
+const styles = StyleSheet.create(() => ({
+    root: {
+        width: '100%',
+    },
+}));
+export default Timeline;

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

@@ -0,0 +1,47 @@
+import { ViewProps } from 'react-native';
+export type TimelineVariant = 'static' | 'progress';
+export type TimelineItemState = 'complete' | 'active' | 'incomplete';
+export type TimelineItemPosition = 'single' | 'start' | 'middle' | 'end';
+export interface TimelineProps extends ViewProps {
+    /**
+     * Child TimelineItem components.
+     */
+    children: React.ReactNode;
+    /**
+     * Controls the indicator style used by all child timeline items.
+     * @default 'static'
+     */
+    variant?: TimelineVariant;
+}
+export interface TimelineItemProps extends ViewProps {
+    /**
+     * The primary label for the timeline item.
+     */
+    label: string;
+    /**
+     * Optional supporting text displayed beneath the label.
+     */
+    helperText?: string;
+    /**
+     * Visual state for progress timelines.
+     * @default 'incomplete'
+     */
+    state?: TimelineItemState;
+    /**
+     * Optional custom content rendered beneath the text content.
+     */
+    children?: React.ReactNode;
+    /**
+     * The timeline variant used when the item is rendered standalone.
+     * Items inside Timeline receive this automatically.
+     * @default 'static'
+     */
+    variant?: TimelineVariant;
+    /**
+     * The item's position in the timeline used to draw connectors.
+     * Items inside Timeline receive this automatically.
+     * @default 'single'
+     */
+    position?: TimelineItemPosition;
+}
+export default TimelineProps;

package/build/components/Timeline/Timeline.props.js

@@ -0,0 +1 @@
+export {};

package/build/components/Timeline/TimelineItem.d.ts

@@ -0,0 +1,6 @@
+import type { TimelineItemProps } from './Timeline.props';
+declare const TimelineItem: {
+    ({ children, helperText, label, position, state, style, variant, accessibilityLabel: accessibilityLabelProp, accessible: accessibleProp, ...rest }: TimelineItemProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default TimelineItem;

package/build/components/Timeline/TimelineItem.js

@@ -0,0 +1,235 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TickSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { BodyText } from '../BodyText';
+import { Icon } from '../Icon';
+const TimelineItem = ({ children, helperText, label, position = 'single', state = 'incomplete', style, variant = 'static', accessibilityLabel: accessibilityLabelProp, accessible: accessibleProp, ...rest }) => {
+    styles.useVariants({ position, state, variant });
+    const hasCustomContent = Boolean(children);
+    const computedAccessibilityLabel = [
+        label,
+        helperText,
+        variant === 'progress' ? `Step ${state}` : undefined,
+    ]
+        .filter(Boolean)
+        .join(', ');
+    return (_jsxs(View, { style: [styles.item, style], ...rest, accessible: accessibleProp ?? !hasCustomContent, accessibilityLabel: (accessibleProp ?? !hasCustomContent)
+            ? (accessibilityLabelProp ?? computedAccessibilityLabel)
+            : undefined, children: [_jsxs(View, { style: styles.indicatorColumn, children: [(position === 'middle' || position === 'end') && _jsx(View, { style: styles.topConnector }), _jsx(View, { style: styles.circle, children: variant === 'progress' && state === 'complete' ? (_jsx(Icon, { as: TickSmallIcon, width: 20, height: 20, style: styles.completeIcon })) : variant === 'progress' && state === 'active' ? (_jsx(View, { style: styles.activeInnerDot })) : null }), (position === 'start' || position === 'middle') && _jsx(View, { style: styles.bottomConnector })] }), _jsxs(View, { style: styles.content, children: [_jsxs(View, { style: styles.textContent, accessible: hasCustomContent, accessibilityLabel: hasCustomContent ? (accessibilityLabelProp ?? computedAccessibilityLabel) : undefined, children: [_jsx(BodyText, { size: "md", weight: "semibold", style: styles.label, children: label }), helperText ? (_jsx(BodyText, { size: "md", style: styles.helperText, children: helperText })) : null] }), children ? _jsx(View, { style: styles.customContent, children: children }) : null] })] }));
+};
+TimelineItem.displayName = 'TimelineItem';
+const styles = StyleSheet.create(theme => ({
+    item: {
+        flexDirection: 'row',
+        gap: theme.components.timeline.gap,
+        width: '100%',
+    },
+    indicatorColumn: {
+        alignItems: 'center',
+        variants: {
+            variant: {
+                static: {
+                    width: theme.components.timeline.static.circle.width,
+                },
+                progress: {
+                    width: theme.components.timeline.progress.circle.width,
+                },
+            },
+        },
+    },
+    topConnector: {
+        width: theme.components.timeline.bar.width,
+        variants: {
+            variant: {
+                static: {
+                    height: theme.components.timeline.static.circle.height / 2,
+                    backgroundColor: theme.color.surface.brand.default,
+                },
+                progress: {
+                    height: 0,
+                },
+            },
+            state: {
+                complete: {},
+                active: {},
+                incomplete: {},
+            },
+        },
+        compoundVariants: [
+            {
+                variant: 'progress',
+                state: 'complete',
+                styles: {
+                    backgroundColor: theme.color.surface.brand.default,
+                },
+            },
+            {
+                variant: 'progress',
+                state: 'active',
+                styles: {
+                    backgroundColor: theme.color.surface.brand.default,
+                },
+            },
+            {
+                variant: 'progress',
+                state: 'incomplete',
+                styles: {
+                    backgroundColor: theme.color.border.subtle,
+                },
+            },
+        ],
+    },
+    bottomConnector: {
+        flex: 1,
+        minHeight: theme.components.timeline.content.paddingBottom,
+        width: theme.components.timeline.bar.width,
+        variants: {
+            variant: {
+                static: {
+                    backgroundColor: theme.color.surface.brand.default,
+                },
+                progress: {},
+            },
+            state: {
+                complete: {},
+                active: {},
+                incomplete: {},
+            },
+        },
+        compoundVariants: [
+            {
+                variant: 'progress',
+                state: 'complete',
+                styles: {
+                    backgroundColor: theme.color.surface.brand.default,
+                },
+            },
+            {
+                variant: 'progress',
+                state: 'active',
+                styles: {
+                    backgroundColor: theme.color.border.subtle,
+                },
+            },
+            {
+                variant: 'progress',
+                state: 'incomplete',
+                styles: {
+                    backgroundColor: theme.color.border.subtle,
+                },
+            },
+        ],
+    },
+    circle: {
+        borderRadius: theme.borderRadius.full,
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: 2,
+        variants: {
+            variant: {
+                static: {
+                    width: theme.components.timeline.static.circle.width,
+                    height: theme.components.timeline.static.circle.height,
+                    backgroundColor: theme.color.surface.brand.default,
+                },
+                progress: {
+                    width: theme.components.timeline.progress.circle.width,
+                    height: theme.components.timeline.progress.circle.height,
+                },
+            },
+            state: {
+                complete: {},
+                active: {},
+                incomplete: {},
+            },
+        },
+        compoundVariants: [
+            {
+                variant: 'progress',
+                state: 'complete',
+                styles: {
+                    backgroundColor: theme.color.surface.brand.default,
+                },
+            },
+            {
+                variant: 'progress',
+                state: 'active',
+                styles: {
+                    backgroundColor: theme.color.surface.neutral.subtle,
+                    borderWidth: theme.borderWidth[2],
+                    borderColor: theme.color.surface.brand.default,
+                },
+            },
+            {
+                variant: 'progress',
+                state: 'incomplete',
+                styles: {
+                    backgroundColor: theme.color.surface.neutral.subtle,
+                    borderWidth: theme.borderWidth[2],
+                    borderColor: theme.color.border.subtle,
+                },
+            },
+        ],
+    },
+    activeInnerDot: {
+        width: '100%',
+        height: '100%',
+        borderRadius: theme.borderRadius.full,
+        backgroundColor: theme.color.surface.brand.default,
+    },
+    completeIcon: {
+        color: theme.color.text.inverted,
+    },
+    content: {
+        flex: 1,
+        minWidth: 0,
+        gap: theme.components.timeline.content.gap,
+        variants: {
+            position: {
+                single: {
+                    paddingBottom: 0,
+                },
+                start: {
+                    paddingBottom: theme.components.timeline.content.paddingBottom,
+                },
+                middle: {
+                    paddingBottom: theme.components.timeline.content.paddingBottom,
+                },
+                end: {
+                    paddingBottom: 0,
+                },
+            },
+            variant: {
+                static: {
+                    paddingTop: 0,
+                },
+                progress: {
+                    paddingTop: theme.components.timeline.content.paddingTop,
+                },
+            },
+        },
+        compoundVariants: [
+            {
+                position: 'start',
+                variant: 'static',
+                styles: {
+                    marginTop: -6,
+                },
+            },
+        ],
+    },
+    textContent: {
+        width: '100%',
+    },
+    label: {
+        color: theme.color.text.primary,
+    },
+    helperText: {
+        color: theme.color.text.secondary,
+    },
+    customContent: {
+        width: '100%',
+    },
+}));
+export default TimelineItem;

package/build/components/Timeline/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Timeline } from './Timeline';
+export { default as TimelineItem } from './TimelineItem';
+export type { TimelineItemPosition, TimelineItemProps, TimelineItemState, TimelineProps, TimelineVariant, } from './Timeline.props';

package/build/components/Timeline/index.js

@@ -0,0 +1,2 @@
+export { default as Timeline } from './Timeline';
+export { default as TimelineItem } from './TimelineItem';

package/build/components/VerificationInput/VerificationInput.js

@@ -5,7 +5,7 @@ import { StyleSheet } from 'react-native-unistyles';
 import { FormField } from '../FormField';
 import { getNextIndexFromValueChange } from './VerificationInput.utils';
 import { VerificationInputSlot } from './VerificationInputSlot';
-const VerificationInput = forwardRef(({ value = '', onChangeText, label, labelVariant = 'body', helperText, helperIcon, validationStatus = 'initial', validText, invalidText, disabled = false, readonly = false, secureTextEntry = false, autoFocus = false, style, ...props }, ref) => {
+const VerificationInput = forwardRef(({ value = '', onChangeText, label, labelVariant = 'body', helperText, helperIcon, validationStatus = 'initial', validText, invalidText, disabled = false, readonly = false, secureTextEntry = false, autoFocus = false, style, testID, ...props }, ref) => {
     const length = 6;
     const inputRef = useRef(null);
     const latestValueRef = useRef(value);
@@ -160,7 +160,7 @@ const VerificationInput = forwardRef(({ value = '', onChangeText, label, labelVa
                         latestSelectionRef.current = nextSelection;
                         setSelection(nextSelection);
                         setFocusedIndex(Math.min(nextSelection.start, length - 1));
-                    }, onFocus: handleFocus, onBlur: handleBlur, selection: selection, keyboardType: "number-pad", textContentType: "oneTimeCode", autoComplete: "sms-otp", secureTextEntry: secureTextEntry, maxLength: length, caretHidden: true, style: styles.hiddenInput }), slots.map(index => {
+                    }, onFocus: handleFocus, onBlur: handleBlur, selection: selection, keyboardType: "number-pad", textContentType: "oneTimeCode", autoComplete: "sms-otp", secureTextEntry: secureTextEntry, maxLength: length, caretHidden: true, style: styles.hiddenInput, testID: testID }), slots.map(index => {
                     const char = displayValue[index] || '';
                     const isActive = focusedIndex === index;
                     const displayChar = secureTextEntry && char ? '*' : char;
@@ -168,7 +168,7 @@ const VerificationInput = forwardRef(({ value = '', onChangeText, label, labelVa
                             pendingFocusIndexRef.current = index;
                             inputRef.current?.focus();
                             setSelectionIndex(index);
-                        } }, index));
+                        }, testID: testID ? `${testID}-${index}` : undefined }, index));
                 })] }) }));
 });
 const styles = StyleSheet.create(theme => ({