@utilitywarehouse/hearth-react-native 0.27.0 → 0.27.2-test

package/src/components/IconContainer/IconContainer.stories.tsx

@@ -1,5 +1,6 @@
-import { Meta, StoryObj } from '@storybook/react-vite';
+import { Meta, StoryObj } from '@storybook/react-native';
 import * as Icons from '@utilitywarehouse/hearth-react-native-icons';
+import { ComponentType } from 'react';
 import { IconContainer } from '.';
 import { VariantTitle } from '../../../docs/components';
 import { Box } from '../Box';
@@ -53,7 +54,9 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Playground: Story = { render: args => <IconContainer {...args} /> };
+export const Playground: Story = {
+  render: (args: typeof meta.args) => <IconContainer {...args} />,
+};
 
 export const Subtle: Story = {
   parameters: {
@@ -86,7 +89,7 @@ export const KitchenSink: Story = {
   parameters: {
     controls: { exclude: ['radiusNone', 'variant', 'color', 'size'] },
   },
-  render: ({ icon }) => {
+  render: ({ icon }: { icon: ComponentType }) => {
     const sizes: Array<'sm' | 'md' | 'lg'> = ['sm', 'md', 'lg'];
     const colors: Array<
       'pig' | 'energy' | 'broadband' | 'mobile' | 'insurance' | 'cashback' | 'highlight'
@@ -95,33 +98,35 @@ export const KitchenSink: Story = {
       <Flex direction="column" spacing="lg">
         {sizes.map(size => (
           <Box key={size} gap="300">
-            <VariantTitle title={`Size: ${size.toUpperCase()} / Subtle`}> </VariantTitle>
-            <Flex direction="row" wrap="wrap" spacing="md">
-              {colors.map(color => (
-                <IconContainer
-                  key={`${size}-subtle-${color}`}
-                  icon={icon}
-                  size={size}
-                  variant="subtle"
-                  color={color}
-                />
-              ))}
-            </Flex>
-            <VariantTitle title={`Size: ${size.toUpperCase()} / Emphasis`}> </VariantTitle>
-            <Flex direction="row" wrap="wrap" spacing="md">
-              {colors.map(
-                color =>
-                  color !== 'highlight' && (
-                    <IconContainer
-                      key={`${size}-emphasis-${color}`}
-                      icon={icon}
-                      size={size}
-                      variant="emphasis"
-                      color={color}
-                    />
-                  )
-              )}
-            </Flex>
+            <VariantTitle title={`Size: ${size.toUpperCase()} / Subtle`}>
+              <Flex direction="row" wrap="wrap" spacing="md">
+                {colors.map(color => (
+                  <IconContainer
+                    key={`${size}-subtle-${color}`}
+                    icon={icon}
+                    size={size}
+                    variant="subtle"
+                    color={color}
+                  />
+                ))}
+              </Flex>
+            </VariantTitle>
+            <VariantTitle title={`Size: ${size.toUpperCase()} / Emphasis`}>
+              <Flex direction="row" wrap="wrap" spacing="md">
+                {colors.map(
+                  color =>
+                    color !== 'highlight' && (
+                      <IconContainer
+                        key={`${size}-emphasis-${color}`}
+                        icon={icon}
+                        size={size}
+                        variant="emphasis"
+                        color={color}
+                      />
+                    )
+                )}
+              </Flex>
+            </VariantTitle>
           </Box>
         ))}
       </Flex>

package/src/components/List/List.tsx

@@ -14,7 +14,8 @@ const List = ({
   invalidText,
   ...props
 }: ListProps) => {
-  const { loading, disabled, container = 'none' } = props;
+  const { loading, disabled, container = 'none', testID, style, ...rest } = props;
+
   const orderRef = useRef<string[]>([]);
   const [firstItemId, setFirstItemId] = useState<string | undefined>(undefined);
   const containerToCard: {
@@ -51,7 +52,7 @@ const List = ({
   styles.useVariants({ disabled });
   return (
     <ListContext.Provider value={value}>
-      <View {...props} style={[styles.container, props.style]}>
+      <View {...rest} style={[styles.container, style]}>
         {heading ? (
           <SectionHeader
             heading={heading}
@@ -61,10 +62,10 @@ const List = ({
           />
         ) : null}
         {container === 'none' ? (
-          <View>{children}</View>
+          <View testID={testID}>{children}</View>
         ) : (
           React.Children.count(children) > 0 && (
-            <Card {...containerToCard} noPadding style={styles.card}>
+            <Card {...containerToCard} noPadding style={styles.card} testID={testID}>
               <>{children}</>
             </Card>
           )

package/src/components/Modal/Modal.tsx

@@ -292,7 +292,7 @@ const Modal = ({
             </View>
           ) : null}
           {inNavModal && (
-            <InNavModalContainer style={{ flexGrow: stickyFooter ? 1 : 0 }}>
+            <InNavModalContainer style={{ flex: stickyFooter ? 1 : 0 }}>
               {children}
               {!stickyFooter ? <View style={styles.inNavModalFooterContainer}>{footer}</View> : null}
             </InNavModalContainer>

package/src/components/SegmentedControl/SegmentedControl.docs.mdx

@@ -16,8 +16,10 @@ Each option is presented as an equal-priority segment in a single horizontal gro
 
 - [Playground](#playground)
 - [Usage](#usage)
-- [Sizes](#sizes)
 - [Props](#props)
+- [Examples](#examples)
+  - [Sizes](#sizes)
+  - [Icons](#icons)
 - [Accessibility](#accessibility)
 
 ## Playground
@@ -50,15 +52,6 @@ const Example = () => {
 };
 ```
 
-## Sizes
-
-Figma defines two size variants for Segmented Control:
-
-- `sm` maps to `SM-32`
-- `md` maps to `MD-48`
-
-<Canvas of={Stories.Sizes} />
-
 ## Props
 
 ### SegmentedControl
@@ -74,11 +67,45 @@ Figma defines two size variants for Segmented Control:
 
 ### SegmentedControlOption
 
-| Property   | Type        | Description                    | Default  |
-| ---------- | ----------- | ------------------------------ | -------- |
-| `value`    | `string`    | Unique value for this segment. | required |
-| `children` | `ReactNode` | Option label/content.          | required |
-| `disabled` | `boolean`   | Disables only this option.     | `false`  |
+| Property   | Type            | Description                    | Default  |
+| ---------- | --------------- | ------------------------------ | -------- |
+| `value`    | `string`        | Unique value for this segment. | required |
+| `children` | `ReactNode`     | Option label/content.          | required |
+| `icon`     | `ComponentType` | Optional leading icon.         | -        |
+| `disabled` | `boolean`       | Disables only this option.     | `false`  |
+
+## Examples
+
+### Sizes
+
+Figma defines two size variants for Segmented Control:
+
+- `sm` maps to `SM-32`
+- `md` maps to `MD-48`
+
+<Canvas of={Stories.Sizes} />
+
+```tsx
+<SegmentedControl size="sm">...</SegmentedControl>
+<SegmentedControl size="md">...</SegmentedControl>
+```
+
+### Icons
+
+SegmentedControlOption supports an optional leading icon.
+
+<Canvas of={Stories.WithIcons} />
+
+```tsx
+import { MobileSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+
+<SegmentedControl>
+  <SegmentedControlOption value="mobile" icon={MobileSmallIcon}>
+    Mobile
+  </SegmentedControlOption>
+  ...
+</SegmentedControl>;
+```
 
 ## Accessibility
 

package/src/components/SegmentedControl/SegmentedControl.figma.tsx

@@ -3,20 +3,17 @@ import { SegmentedControl, SegmentedControlOption } from '../';
 
 figma.connect(
   SegmentedControl,
-  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=6185-1021&t=c7xg5X0N2EL0t87h-4',
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=6185-1021&m=dev',
   {
     props: {
       size: figma.enum('Size', {
         'SM-32': 'sm',
         'MD-48': 'md',
       }),
-      disabled: figma.enum('State', {
-        Disabled: true,
-      }),
       options: figma.children('Option'),
     },
     example: props => (
-      <SegmentedControl defaultValue="option-1" size={props.size} disabled={props.disabled}>
+      <SegmentedControl defaultValue="option-1" size={props.size}>
         {props.options}
       </SegmentedControl>
     ),
@@ -25,15 +22,17 @@ figma.connect(
 
 figma.connect(
   SegmentedControlOption,
-  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=4340-1252&t=c7xg5X0N2EL0t87h-4',
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=4340-1252&m=dev',
   {
     props: {
       label: figma.string('Label'),
-      value: figma.string('Value'),
+      icon: figma.boolean('Icon?', {
+        true: figma.instance('Icon-20'),
+      }),
     },
     example: props => (
-      <SegmentedControlOption value={props.value ?? 'option'}>
-        {props.label ?? 'Option'}
+      <SegmentedControlOption value={'option'} icon={props.icon}>
+        {props.label}
       </SegmentedControlOption>
     ),
   }

package/src/components/SegmentedControl/SegmentedControl.stories.tsx

@@ -1,3 +1,8 @@
+import {
+  BroadbandSmallIcon,
+  ElectricitySmallIcon,
+  MobileSmallIcon,
+} from '@utilitywarehouse/hearth-react-native-icons';
 import { useState } from 'react';
 import { BodyText, Flex, SegmentedControl, SegmentedControlOption } from '../';
 
@@ -75,3 +80,19 @@ export const Disabled = {
     </SegmentedControl>
   ),
 };
+
+export const WithIcons = {
+  render: () => (
+    <SegmentedControl defaultValue="energy" size="md">
+      <SegmentedControlOption value="energy" icon={ElectricitySmallIcon}>
+        Energy
+      </SegmentedControlOption>
+      <SegmentedControlOption value="broadband" icon={BroadbandSmallIcon}>
+        Broadband
+      </SegmentedControlOption>
+      <SegmentedControlOption value="mobile" icon={MobileSmallIcon}>
+        Mobile
+      </SegmentedControlOption>
+    </SegmentedControl>
+  ),
+};

package/src/components/SegmentedControl/SegmentedControl.tsx

@@ -206,7 +206,7 @@ const SegmentedControl = ({
         {...remainingProps}
       >
         {hasIndicator ? (
-          <Indicator pointerEvents="none" style={[styles.indicator, indicatorStyle]} />
+          <Indicator style={[styles.indicator, styles.pointerEventsNone, indicatorStyle]} />
         ) : null}
         {children}
       </View>
@@ -252,6 +252,9 @@ const styles = StyleSheet.create(theme => ({
     borderRadius: theme.components.segmentedControl.borderRadius,
     backgroundColor: theme.color.interactive.brand.surface.strong.default,
   },
+  pointerEventsNone: {
+    pointerEvents: 'none',
+  },
 }));
 
 export default SegmentedControl;

package/src/components/SegmentedControl/SegmentedControlOption.props.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { ComponentType, ReactNode } from 'react';
 import type { PressableProps, ViewProps } from 'react-native';
 
 export interface SegmentedControlOptionProps extends Omit<PressableProps, 'children'> {
@@ -6,6 +6,8 @@ export interface SegmentedControlOptionProps extends Omit<PressableProps, 'child
   value: string;
   /** Option label/content. */
   children: ReactNode;
+  /** Optional leading icon. */
+  icon?: ComponentType<any>;
   /** Disables only this option. */
   disabled?: boolean;
   style?: ViewProps['style'];

package/src/components/SegmentedControl/SegmentedControlOption.tsx

@@ -10,6 +10,7 @@ import Animated, {
 } from 'react-native-reanimated';
 import { StyleSheet } from 'react-native-unistyles';
 import { BodyText } from '../BodyText';
+import { Icon } from '../Icon';
 import { useSegmentedControlContext } from './SegmentedControl.context';
 import type SegmentedControlOptionProps from './SegmentedControlOption.props';
 
@@ -18,6 +19,7 @@ const AnimatedView = Animated.createAnimatedComponent(View);
 const SegmentedControlOptionRoot = ({
   value,
   children,
+  icon,
   accessibilityLabel,
   disabled = false,
   style,
@@ -79,47 +81,48 @@ const SegmentedControlOptionRoot = ({
         : null)}
     >
       <View
-        style={styles.labelWrap}
+        style={styles.contentWrap}
         accessible={false}
         accessibilityElementsHidden
         importantForAccessibility="no-hide-descendants"
         {...(Platform.OS === 'web' ? ({ 'aria-hidden': true } as any) : null)}
       >
-        <BodyText
-          size="md"
-          weight="semibold"
-          style={styles.labelSizer}
-          accessible={false}
-          accessibilityElementsHidden
-          importantForAccessibility="no-hide-descendants"
-          {...(Platform.OS === 'web' ? ({ 'aria-hidden': true } as any) : null)}
-        >
-          {children}
-        </BodyText>
-        <AnimatedView
-          pointerEvents="none"
-          style={[styles.textLayer, regularLabelStyle]}
-          accessible={false}
-          accessibilityElementsHidden
-          importantForAccessibility="no-hide-descendants"
-          {...(Platform.OS === 'web' ? ({ 'aria-hidden': true } as any) : null)}
-        >
-          <BodyText size="md" weight="regular" style={styles.textRegular}>
+        {icon ? <Icon as={icon} size="sm" style={styles.icon} /> : null}
+        <View style={styles.labelWrap}>
+          <BodyText
+            size="md"
+            weight="semibold"
+            style={styles.labelSizer}
+            accessible={false}
+            accessibilityElementsHidden
+            importantForAccessibility="no-hide-descendants"
+            {...(Platform.OS === 'web' ? ({ 'aria-hidden': true } as any) : null)}
+          >
             {children}
           </BodyText>
-        </AnimatedView>
-        <AnimatedView
-          pointerEvents="none"
-          style={[styles.textLayer, selectedLabelStyle]}
-          accessible={false}
-          accessibilityElementsHidden
-          importantForAccessibility="no-hide-descendants"
-          {...(Platform.OS === 'web' ? ({ 'aria-hidden': true } as any) : null)}
-        >
-          <BodyText size="md" weight="semibold" style={styles.textSelected}>
-            {children}
-          </BodyText>
-        </AnimatedView>
+          <AnimatedView
+            style={[styles.textLayer, styles.pointerEventsNone, regularLabelStyle]}
+            accessible={false}
+            accessibilityElementsHidden
+            importantForAccessibility="no-hide-descendants"
+            {...(Platform.OS === 'web' ? ({ 'aria-hidden': true } as any) : null)}
+          >
+            <BodyText size="md" weight="regular" style={styles.textRegular}>
+              {children}
+            </BodyText>
+          </AnimatedView>
+          <AnimatedView
+            style={[styles.textLayer, styles.pointerEventsNone, selectedLabelStyle]}
+            accessible={false}
+            accessibilityElementsHidden
+            importantForAccessibility="no-hide-descendants"
+            {...(Platform.OS === 'web' ? ({ 'aria-hidden': true } as any) : null)}
+          >
+            <BodyText size="md" weight="semibold" style={styles.textSelected}>
+              {children}
+            </BodyText>
+          </AnimatedView>
+        </View>
       </View>
     </Pressable>
   );
@@ -180,6 +183,12 @@ const styles = StyleSheet.create(theme => ({
       },
     },
   },
+  contentWrap: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: theme.components.segmentedControl.gap,
+  },
   labelWrap: {
     position: 'relative',
     alignItems: 'center',
@@ -195,6 +204,21 @@ const styles = StyleSheet.create(theme => ({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  pointerEventsNone: {
+    pointerEvents: 'none',
+  },
+  icon: {
+    variants: {
+      selected: {
+        true: {
+          color: theme.color.icon.inverted,
+        },
+        false: {
+          color: theme.color.icon.primary,
+        },
+      },
+    },
+  },
   textRegular: {
     color: theme.color.text.primary,
   },

package/src/components/Select/SelectOption.figma.tsx

@@ -3,10 +3,10 @@ import { SelectOption } from '../';
 
 figma.connect(
   SelectOption,
-  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=4340%3A1252',
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=3394-3663&m=dev',
   {
     props: {
-      label: figma.string('Label'),
+      label: figma.string('Text'),
       disabled: figma.enum('State', {
         Disabled: true,
       }),

package/src/components/TimePicker/TimePickerWheel.tsx

@@ -46,8 +46,8 @@ const TimePickerWheel = ({ value, setValue = () => {}, items }: TimePickerWheelP
 
   const renderOverlay = useCallback(
     () => (
-      <View style={[styles.overlayContainer]} pointerEvents="none">
-        <View pointerEvents="none" style={[styles.fadeOverlay, { height: fadeHeight }]}>
+      <View style={[styles.overlayContainer, styles.pointerEventsNone]}>
+        <View style={[styles.fadeOverlay, styles.pointerEventsNone, { height: fadeHeight }]}>
           <Svg width="100%" height="100%" preserveAspectRatio="none">
             <Defs>
               <LinearGradient id={`${gradientId}-top`} x1="0" y1="0" x2="0" y2="1">
@@ -59,8 +59,12 @@ const TimePickerWheel = ({ value, setValue = () => {}, items }: TimePickerWheelP
           </Svg>
         </View>
         <View
-          pointerEvents="none"
-          style={[styles.fadeOverlay, styles.fadeOverlayBottom, { height: fadeHeight }]}
+          style={[
+            styles.fadeOverlay,
+            styles.fadeOverlayBottom,
+            styles.pointerEventsNone,
+            { height: fadeHeight },
+          ]}
         >
           <Svg width="100%" height="100%" preserveAspectRatio="none">
             <Defs>
@@ -149,6 +153,9 @@ const styles = StyleSheet.create(theme => ({
     top: undefined,
     bottom: 0,
   },
+  pointerEventsNone: {
+    pointerEvents: 'none',
+  },
 }));
 
 export default TimePickerWheel;

package/src/components/Toast/Toast.context.tsx

@@ -85,7 +85,7 @@ export const ToastProvider: React.FC<ToastProviderProps> = ({
   return (
     <ToastContext.Provider value={{ addToast, removeToast }}>
       {children}
-      <View pointerEvents="box-none" style={styles.container as any}>
+      <View style={styles.container as any}>
         <View style={styles.stack as any}>
           {toasts.map(t => (
             <ToastItem

package/src/components/VerificationInput/VerificationInput.stories.tsx

@@ -1,6 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react-vite';
 import { InfoMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import { useRef, useState } from 'react';
+import { expect, userEvent, waitFor, within } from 'storybook/test';
 import { VerificationInput, type VerificationInputHandle } from '.';
 import { VariantTitle } from '../../../docs/components';
 import { BodyText } from '../BodyText';
@@ -214,3 +215,35 @@ export const RefMethods: Story = {
     );
   },
 };
+
+export const FocusProgressionAfterEmptySlotSelection: Story = {
+  parameters: {
+    controls: { include: [] },
+  },
+  render: () => {
+    const [value, setValue] = useState('12');
+
+    return (
+      <Flex direction="column" spacing="sm" style={{ width: 400 }}>
+        <VerificationInput label="Verification Code" value={value} onChangeText={setValue} />
+      </Flex>
+    );
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const input = canvas.getByLabelText('Verification Code') as HTMLInputElement;
+
+    input.focus();
+
+    input.setSelectionRange(4, 4);
+    input.dispatchEvent(new Event('select', { bubbles: true }));
+
+    await userEvent.keyboard('3');
+
+    await waitFor(() => {
+      expect(input.value).toBe('123');
+      expect(input.selectionStart).toBe(3);
+      expect(input.selectionEnd).toBe(3);
+    });
+  },
+};

package/src/components/VerificationInput/VerificationInput.tsx

@@ -1,8 +1,9 @@
-import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { Platform, TextInput, View } from 'react-native';
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { TextInput, View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { FormField } from '../FormField';
 import type { VerificationInputHandle, VerificationInputProps } from './VerificationInput.props';
+import { getNextIndexFromValueChange } from './VerificationInput.utils';
 import { VerificationInputSlot } from './VerificationInputSlot';
 
 const VerificationInput = forwardRef<VerificationInputHandle, VerificationInputProps>(
@@ -49,12 +50,15 @@ const VerificationInput = forwardRef<VerificationInputHandle, VerificationInputP
       }
     }, [length, value]);
 
-    const updateValue = (nextValue: string) => {
-      const trimmedValue = nextValue.slice(0, length);
-      latestValueRef.current = trimmedValue;
-      setDisplayValue(trimmedValue);
-      onChangeText?.(trimmedValue);
-    };
+    const updateValue = useCallback(
+      (nextValue: string) => {
+        const trimmedValue = nextValue.slice(0, length);
+        latestValueRef.current = trimmedValue;
+        setDisplayValue(trimmedValue);
+        onChangeText?.(trimmedValue);
+      },
+      [length, onChangeText]
+    );
 
     const setSelectionIndex = (index: number) => {
       const clampedIndex = Math.max(0, Math.min(index, length));
@@ -76,16 +80,6 @@ const VerificationInput = forwardRef<VerificationInputHandle, VerificationInputP
       setFocusedIndex(Math.min(clampedIndex, length - 1));
     };
 
-    const findDiffIndex = (prevValue: string, nextValue: string) => {
-      const minLength = Math.min(prevValue.length, nextValue.length);
-      for (let i = 0; i < minLength; i += 1) {
-        if (prevValue[i] !== nextValue[i]) {
-          return i;
-        }
-      }
-      return minLength;
-    };
-
     const handleChangeText = (text: string) => {
       const prevValue = latestValueRef.current;
       const nextValue = text.slice(0, length);
@@ -94,14 +88,7 @@ const VerificationInput = forwardRef<VerificationInputHandle, VerificationInputP
       const diff = nextLength - prevLength;
       const isBulkInsert = text.length > 1 && diff > 1;
       const shouldBlur = nextLength >= length;
-      let nextIndex = Math.max(
-        0,
-        Math.min(latestSelectionRef.current.start + (diff >= 0 ? 1 : diff), length)
-      );
-      if (Platform.OS === 'android') {
-        const editedIndex = findDiffIndex(prevValue, nextValue);
-        nextIndex = diff >= 0 ? Math.min(editedIndex + 1, length) : Math.max(editedIndex, 0);
-      }
+      const nextIndex = getNextIndexFromValueChange({ prevValue, nextValue, length });
       updateValue(nextValue);
       if (isBulkInsert) {
         setCaretIndex(Math.min(nextLength, length));
@@ -171,7 +158,7 @@ const VerificationInput = forwardRef<VerificationInputHandle, VerificationInputP
           }
         },
       }),
-      [length, onChangeText]
+      [length, updateValue]
     );
 
     const slots = Array.from({ length }, (_, index) => index);
@@ -252,7 +239,6 @@ const VerificationInput = forwardRef<VerificationInputHandle, VerificationInputP
             maxLength={length}
             caretHidden
             style={styles.hiddenInput}
-            pointerEvents="none"
           />
           {slots.map(index => {
             const char = displayValue[index] || '';
@@ -299,11 +285,12 @@ const styles = StyleSheet.create(theme => ({
     position: 'absolute',
     width: '100%',
     height: '100%',
+    pointerEvents: 'none',
     left: 0,
     top: 0,
     color: 'transparent',
     fontSize: 1,
-    opacity: 0.1,
+    opacity: 0.01,
   },
 }));