@utilitywarehouse/hearth-react-native 0.28.1 → 0.28.3

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
 
-> @utilitywarehouse/hearth-react-native@0.28.1 build /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.28.3 build /home/runner/work/hearth/hearth/packages/react-native
 > tsc
 

package/.turbo/turbo-lint.log

@@ -1,5 +1,5 @@
 
-> @utilitywarehouse/hearth-react-native@0.28.1 lint /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.28.3 lint /home/runner/work/hearth/hearth/packages/react-native
 > TIMING=1 eslint .
 
 
@@ -54,15 +54,15 @@
 
 ✖ 23 problems (0 errors, 23 warnings)
 
-Rule                              | Time (ms) | Relative
-:---------------------------------|----------:|--------:
-@typescript-eslint/no-unused-vars |  1518.708 |    59.0%
-react-hooks/exhaustive-deps       |   172.321 |     6.7%
-react-hooks/rules-of-hooks        |    93.331 |     3.6%
-no-global-assign                  |    85.496 |     3.3%
-@typescript-eslint/ban-ts-comment |    43.023 |     1.7%
-no-misleading-character-class     |    42.707 |     1.7%
-no-fallthrough                    |    37.056 |     1.4%
-no-unexpected-multiline           |    36.705 |     1.4%
-no-regex-spaces                   |    31.518 |     1.2%
-no-control-regex                  |    28.945 |     1.1%
+Rule                                      | Time (ms) | Relative
+:-----------------------------------------|----------:|--------:
+@typescript-eslint/no-unused-vars         |  1554.353 |    59.2%
+react-hooks/exhaustive-deps               |   144.027 |     5.5%
+no-global-assign                          |   113.457 |     4.3%
+react-hooks/rules-of-hooks                |    91.927 |     3.5%
+@typescript-eslint/ban-ts-comment         |    60.650 |     2.3%
+no-fallthrough                            |    48.638 |     1.9%
+no-unexpected-multiline                   |    47.691 |     1.8%
+no-misleading-character-class             |    45.726 |     1.7%
+@typescript-eslint/no-unused-expressions  |    29.696 |     1.1%
+@typescript-eslint/triple-slash-reference |    29.272 |     1.1%

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @utilitywarehouse/hearth-react-native
 
+## 0.28.3
+
+### Patch Changes
+
+- [#1028](https://github.com/utilitywarehouse/hearth/pull/1028) [`dccffe1`](https://github.com/utilitywarehouse/hearth/commit/dccffe16342b22e58078dfc0aadfe9a482bfcc74) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: The `Combobox` trigger outline so it is only shown when the control is focused.
+
+## 0.28.2
+
+### Patch Changes
+
+- [#1024](https://github.com/utilitywarehouse/hearth/pull/1024) [`23b6767`](https://github.com/utilitywarehouse/hearth/commit/23b67672b89198a483ddcef88f9c6207b684c4d9) Thanks [@fillyD](https://github.com/fillyD)! - 🐛 [FIX]: Adds missing `testID` to `Select` component
+
 ## 0.28.1
 
 ### Patch Changes

package/build/components/Combobox/Combobox.js

@@ -10,10 +10,10 @@ import { DetailText } from '../DetailText';
 import { FormField, useFormFieldContext } from '../FormField';
 import { Icon } from '../Icon';
 import { Input } from '../Input';
+import { SafeAreaView } from '../SafeAreaView';
 import { Spinner } from '../Spinner';
 import { UnstyledIconButton } from '../UnstyledIconButton';
 import { ComboboxContext } from './Combobox.context';
-import { SafeAreaView } from '../SafeAreaView';
 import ComboboxOption from './ComboboxOption';
 const DEFAULT_SNAP_POINTS = ['25%', '40%', '80%'];
 const Combobox = ({ options = [], value, onValueChange, inputValue, onInputValueChange, label, labelVariant = 'body', placeholder = 'Search', searchPlaceholder = 'Search', disabled = false, validationStatus = 'initial', helperText, helperIcon, invalidText, validText, required = true, children, bottomSheetProps, menuHeading, noOptionsFoundText = 'No options found', listProps, loading = false, readonly = false, getValueLabel, filterOption, ...rest }) => {
@@ -178,9 +178,6 @@ const styles = StyleSheet.create(theme => ({
         borderRadius: theme.components.input.borderRadius,
         paddingHorizontal: theme.components.input.paddingHorizontal,
         gap: theme.components.input.gap,
-        outlineStyle: 'solid',
-        outlineWidth: theme.components.input.borderWidth,
-        outlineColor: theme.color.border.strong,
         variants: {
             disabled: {
                 true: {
@@ -206,7 +203,9 @@ const styles = StyleSheet.create(theme => ({
         },
     },
     triggerFocused: {
-        outlineWidth: theme.components.input.borderWidthFocused,
+        outlineStyle: 'solid',
+        outlineWidth: theme.components.input.borderWidth,
+        outlineColor: theme.color.border.strong,
     },
     leadingIconContainer: {
         alignItems: 'center',

package/build/components/Select/Select.js

@@ -77,7 +77,7 @@ const Select = ({ options = [], value, onValueChange, label, labelVariant = 'bod
                         selectedValue: value,
                         onValueChange,
                         close: closeBottomSheet,
-                    }, children: _jsxs(SafeAreaView, { edges: ['top'], style: { flex: 1 }, children: [menuHeading && (_jsx(View, { style: styles.headingContainer, children: _jsx(DetailText, { size: "lg", children: menuHeading }) })), searchable && (_jsx(View, { style: styles.searchContainer, children: _jsx(Input, { placeholder: searchPlaceholder, value: search, inBottomSheet: true, onChangeText: setSearch, type: "search", testID: testID ? `${testID}-search` : undefined }) })), children ? (_jsx(BottomSheetScrollView, { children: children })) : (_jsx(BottomSheetFlatList, { data: filteredOptions, keyExtractor: (option) => option.value, renderItem: renderSelectOption, ListEmptyComponent: renderEmptyComponent, ...listProps }))] }) }) })] }));
+                    }, children: _jsxs(SafeAreaView, { edges: ['top'], style: { flex: 1 }, children: [menuHeading && (_jsx(View, { style: styles.headingContainer, children: _jsx(DetailText, { size: "lg", children: menuHeading }) })), searchable && (_jsx(View, { style: styles.searchContainer, children: _jsx(Input, { placeholder: searchPlaceholder, value: search, inBottomSheet: true, onChangeText: setSearch, type: "search", testID: testID ? `${testID}-search` : undefined }) })), children ? (_jsx(BottomSheetScrollView, { testID: testID ? `${testID}-options` : undefined, children: children })) : (_jsx(BottomSheetFlatList, { data: filteredOptions, keyExtractor: (option) => option.value, renderItem: renderSelectOption, ListEmptyComponent: renderEmptyComponent, testID: testID ? `${testID}-options` : undefined, ...listProps }))] }) }) })] }));
 };
 const styles = StyleSheet.create(theme => ({
     container: {

package/docs/adding-shadows.mdx

@@ -1,5 +1,6 @@
 import { Meta } from '@storybook/addon-docs/blocks';
-import { BackToTopButton, NextPrevPage } from './components';
+import { BodyText, Box, Card, Center, Heading } from '../src';
+import { BackToTopButton, InputShadowExample, NextPrevPage, UsageWrap } from './components';
 
 <Meta title="Guides / Adding Shadows" />
 <BackToTopButton />
@@ -15,9 +16,16 @@ You can add shadows to your components in Hearth React Native using the Unistyle
 
 Hearth provides a set of predefined shadow styles that you can easily apply to your components. These shadows are defined in the theme and can be accessed via the `theme.helpers.shadow` object.
 
+<UsageWrap>
+  <Center>
+    <InputShadowExample />
+  </Center>
+</UsageWrap>
+
 ```tsx
 import { View } from 'react-native';
 import { StyleSheet, Input } from '@utilitywarehouse/hearth-react-native';
+import { SearchMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
 
 const styles = StyleSheet.create(theme => ({
   input: {
@@ -27,13 +35,22 @@ const styles = StyleSheet.create(theme => ({
 
 const MyComponent = () => (
   <View>
-    <Input placeholder="Input with shadow" style={styles.input} />
+    <Input placeholder="Input with shadow" style={styles.input} leadingIcon={SearchMediumIcon} />
   </View>
 );
 ```
 
 ## Components with Shadow Props
 
+<UsageWrap>
+  <Center>
+    <Card shadowColor="brand" spacing="md">
+      <Heading size="md">Card with Shadow</Heading>
+      <BodyText>This card has a shadow color set to the brand color.</BodyText>
+    </Card>
+  </Center>
+</UsageWrap>
+
 Some Hearth components, like `Card`, allow you to specify shadow colors directly via props. You can use the `shadowColor` prop to set the shadow color based on the theme.
 
 ```tsx
@@ -41,3 +58,10 @@ import { Card } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => <Card shadowColor="brand">{/* Card content */}</Card>;
 ```
+
+<NextPrevPage
+  prevLink="all-components"
+  prevTitle="All Components"
+  nextLink="primitives-box"
+  nextTitle="Box"
+/>

package/docs/all-components.mdx

@@ -14,6 +14,6 @@ This page showcases all the components available in the Hearth React Native libr
 <NextPrevPage
   prevLink="layout-components"
   prevTitle="Layout Components"
-  nextLink="components-accordion"
-  nextTitle="Accordion"
+  nextLink="guides-adding-shadows"
+  nextTitle="Adding Shadows"
 />

package/docs/changelog.mdx

@@ -9,6 +9,18 @@ import { BackToTopButton, NextPrevPage } from './components';
 The changelog for the Hearth React Native library. Here you can find all the changes, improvements, and bug fixes for each version.
 
 
+## 0.28.2
+
+### Patch Changes
+
+- [#1024](https://github.com/utilitywarehouse/hearth/pull/1024) [`23b6767`](https://github.com/utilitywarehouse/hearth/commit/23b67672b89198a483ddcef88f9c6207b684c4d9) Thanks [@fillyD](https://github.com/fillyD)! - 🐛 [FIX]: Adds missing `testID` to `Select` component
+
+## 0.28.1
+
+### Patch Changes
+
+- [#1018](https://github.com/utilitywarehouse/hearth/pull/1018) [`1c5e02e`](https://github.com/utilitywarehouse/hearth/commit/1c5e02ea4b61329e7c55e52f9aa4ae44abc0da23) Thanks [@fillyD](https://github.com/fillyD)! - 🐛 [FIX]: Adds missing `testID` to `Select`, `SelectOption` and `VerificationInput` component
+
 ## 0.28.0
 
 ### Minor Changes

package/docs/components/InputShadowExample.tsx

@@ -0,0 +1,19 @@
+import { SearchMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { StyleSheet } from 'react-native-unistyles';
+import { Box, Input } from '../../src';
+
+const InputShadowExample = () => {
+  return (
+    <Box padding="md">
+      <Input placeholder="Input with shadow" style={styles.input} leadingIcon={SearchMediumIcon} />
+    </Box>
+  );
+};
+
+const styles = StyleSheet.create(theme => ({
+  input: {
+    boxShadow: theme.helpers.shadow.functional,
+  },
+}));
+
+export default InputShadowExample;

package/docs/components/index.ts

@@ -3,6 +3,7 @@ export { default as AdvancedInputExample } from './AdvancedInputExample';
 export { default as BackToTopButton } from './BackToTopButton';
 export { default as BadgeList } from './BadgeList';
 export { default as DocComponentWrap } from './DocComponentWrap';
+export { default as InputShadowExample } from './InputShadowExample';
 export { default as NextPrevPage } from './NextPrevPage';
 export { default as SwitchExample } from './SwitchExample';
 export { default as SwitchList } from './SwitchList';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.28.1",
+  "version": "0.28.3",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -57,8 +57,8 @@
     "vite-plugin-svgr": "^4.5.0",
     "vitest": "^3.2.4",
     "@utilitywarehouse/hearth-fonts": "^0.0.4",
-    "@utilitywarehouse/hearth-react-native-icons": "^0.8.0",
     "@utilitywarehouse/hearth-react-icons": "^0.8.0",
+    "@utilitywarehouse/hearth-react-native-icons": "^0.8.0",
     "@utilitywarehouse/hearth-svg-assets": "^0.5.0",
     "@utilitywarehouse/hearth-tokens": "^0.2.4"
   },

package/src/components/Checkbox/Checkbox.docs.mdx

@@ -9,6 +9,7 @@ import {
   CheckboxLabel,
   CheckboxTile,
   FormField,
+  Grid,
 } from '../../';
 import StorybookLink from '../../../../../shared/storybook/StorybookLink';
 import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
@@ -38,6 +39,7 @@ Whether you're building a simple form or a complex data collection system, the C
 - [Variants](#variants)
 - [Advanced Usage](#advanced-usage)
 - [Examples](#examples)
+  - [Grid Layout With Tiles](#grid-layout-with-tiles)
   - [`CheckboxTile` component](#checkboxtile-component)
   - [`CheckboxImage` component](#checkboximage-component)
   - [`CheckboxGroup` component](#checkboxgroup-component)
@@ -313,6 +315,44 @@ const MyComponent = () => {
 
 ## Examples
 
+### Grid Layout With Tiles
+
+Wrap tile checkboxes in a `Grid` when you want a multi-column layout inside a `CheckboxGroup`.
+
+<UsageWrap>
+  <Center>
+    <Box minWidth={400}>
+      <CheckboxGroup label="Which options helped?" type="tile">
+        <Grid columns={2} spacing="md">
+          <Checkbox label="Fast response" value="fast-response" />
+          <Checkbox label="Clear steps" value="clear-steps" />
+          <Checkbox label="Useful example" value="useful-example" />
+          <Checkbox label="Still investigating" value="still-investigating" />
+        </Grid>
+      </CheckboxGroup>
+    </Box>
+  </Center>
+</UsageWrap>
+
+```tsx
+import { Checkbox, CheckboxGroup, Grid } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => {
+  const [value, setValue] = React.useState(['fast-response']);
+
+  return (
+    <CheckboxGroup label="Which options helped?" type="tile" value={value} onChange={setValue}>
+      <Grid columns={2} spacing="md">
+        <Checkbox label="Fast response" value="fast-response" />
+        <Checkbox label="Clear steps" value="clear-steps" />
+        <Checkbox label="Useful example" value="useful-example" />
+        <Checkbox label="Still investigating" value="still-investigating" />
+      </Grid>
+    </CheckboxGroup>
+  );
+};
+```
+
 ### `CheckboxTile` component
 
 The `CheckboxTile` component is a variant of the `Checkbox` component that displays the radio button as a card.

package/src/components/Combobox/Combobox.tsx

@@ -9,15 +9,14 @@ import { DetailText } from '../DetailText';
 import { FormField, useFormFieldContext } from '../FormField';
 import { Icon } from '../Icon';
 import { Input } from '../Input';
+import { SafeAreaView } from '../SafeAreaView';
 import { Spinner } from '../Spinner';
 import { UnstyledIconButton } from '../UnstyledIconButton';
-import { ComboboxContext } from './Combobox.context';
-import { ComboboxSelection } from './Combobox.context';
+import { ComboboxContext, ComboboxSelection } from './Combobox.context';
 import ComboboxProps, {
   ComboboxOptionItemProps,
   ComboboxRenderContentProps,
 } from './Combobox.props';
-import { SafeAreaView } from '../SafeAreaView';
 import ComboboxOption from './ComboboxOption';
 
 const DEFAULT_SNAP_POINTS = ['25%', '40%', '80%'];
@@ -376,9 +375,6 @@ const styles = StyleSheet.create(theme => ({
     borderRadius: theme.components.input.borderRadius,
     paddingHorizontal: theme.components.input.paddingHorizontal,
     gap: theme.components.input.gap,
-    outlineStyle: 'solid',
-    outlineWidth: theme.components.input.borderWidth,
-    outlineColor: theme.color.border.strong,
     variants: {
       disabled: {
         true: {
@@ -404,7 +400,9 @@ const styles = StyleSheet.create(theme => ({
     },
   },
   triggerFocused: {
-    outlineWidth: theme.components.input.borderWidthFocused,
+    outlineStyle: 'solid',
+    outlineWidth: theme.components.input.borderWidth,
+    outlineColor: theme.color.border.strong,
   },
   leadingIconContainer: {
     alignItems: 'center',

package/src/components/Modal/Modal.docs.mdx

@@ -478,36 +478,57 @@ import { useCallback, useEffect, useRef } from 'react';
 import { Platform, StyleSheet, View } from 'react-native';
 
 import { BodyText, Heading, InlineLink, Modal } from '@utilitywarehouse/hearth-react-native';
+import type { NavigationAction } from '@react-navigation/native';
 
-export default function ModalScreen() {
+export default function ModalScreen({ onClose }: { onClose?: () => void }) {
   const modalRef = useRef<Modal>(null);
   const navigation = useNavigation();
   const isClosingRef = useRef(false);
 
-  const handleClose = useCallback(() => {
-    if (Platform.OS === 'ios') {
-      navigation.goBack();
-      return;
-    }
-    if (isClosingRef.current) return;
-
-    isClosingRef.current = true;
-    // Trigger our custom animation first
-    modalRef.current?.triggerCloseAnimation?.();
+  const handleClose = useCallback(
+    (action?: NavigationAction) => {
+      if (Platform.OS === 'ios') {
+        if (onClose) {
+          onClose();
+        } else {
+          navigation.goBack();
+        }
 
-    // Delay the actual navigation to allow our animation to play
-    setTimeout(() => {
-      navigation.goBack();
-    }, 100); // Match Modal animation duration
-  }, [navigation]);
+        return;
+      }
+
+      if (isClosingRef.current) {
+        return;
+      }
+
+      isClosingRef.current = true;
+      // Trigger our custom animation first
+      modalRef.current?.triggerCloseAnimation?.();
+
+      // Delay the actual navigation to allow our animation to play
+      setTimeout(() => {
+        if (onClose) {
+          onClose();
+        } else if (action) {
+          // Dispatch the original action (e.g. popToTop, replace, reset)
+          // so we don't override the caller's intended navigation behaviour
+          navigation.dispatch(action);
+        } else {
+          navigation.goBack();
+        }
+      }, 100); // Match Modal animation duration
+    },
+    [navigation, onClose]
+  );
 
   useEffect(() => {
     if (Platform.OS === 'android') {
       const unsubscribe = navigation.addListener('beforeRemove', e => {
         if (!isClosingRef.current) {
-          // Prevent default behavior
+          // Prevent default behavior of the navigation action so we can
+          // play the close animation before letting navigation proceed
           e.preventDefault();
-          handleClose();
+          handleClose(e.data.action);
         }
       });
 

package/src/components/Radio/Radio.docs.mdx

@@ -3,6 +3,7 @@ import { TickSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import {
   Box,
   Center,
+  Grid,
   Radio,
   RadioGroup,
   RadioIcon,
@@ -41,6 +42,7 @@ The Radio component presents users with predefined choices and enables them to s
 - [Variants](#variants)
 - [Advanced Usage](#advanced-usage)
 - [Examples](#examples)
+  - [Grid Layout With Tiles](#grid-layout-with-tiles)
   - [`RadioTile` component](#radiotile-component)
   - [`RadioImage` component](#radioimage-component)
   - [`RadioGroup` component](#radiogroup-component)
@@ -238,6 +240,44 @@ const AdvancedExample = () => {
 
 ## Examples
 
+### Grid Layout With Tiles
+
+Wrap tile radios in a `Grid` when you want a multi-column layout while keeping the `RadioGroup` label, helper text and validation messaging.
+
+<UsageWrap>
+  <Center>
+    <RadioGroup label="Did this solve your problem?" type="tile">
+      <Box minWidth={300}>
+        <Grid columns={2} spacing="md">
+          <Radio label="Yes" value="yes" />
+          <Radio label="No" value="no" />
+          <Radio label="Partly" value="partly" />
+          <Radio label="Not yet" value="not-yet" />
+        </Grid>
+      </Box>
+    </RadioGroup>
+  </Center>
+</UsageWrap>
+
+```tsx
+import { Grid, Radio, RadioGroup } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => {
+  const [value, setValue] = React.useState('yes');
+
+  return (
+    <RadioGroup label="Did this solve your problem?" type="tile" value={value} onChange={setValue}>
+      <Grid columns={2} spacing="md">
+        <Radio label="Yes" value="yes" />
+        <Radio label="No" value="no" />
+        <Radio label="Partly" value="partly" />
+        <Radio label="Not yet" value="not-yet" />
+      </Grid>
+    </RadioGroup>
+  );
+};
+```
+
 ### `RadioTile` component
 
 The `RadioTile` component is a variant of the `Radio` component that displays the radio button as a card.

package/src/components/Select/Select.tsx

@@ -203,13 +203,16 @@ const Select = ({
             )}
 
             {children ? (
-              <BottomSheetScrollView>{children}</BottomSheetScrollView>
+              <BottomSheetScrollView testID={testID ? `${testID}-options` : undefined}>
+                {children}
+              </BottomSheetScrollView>
             ) : (
               <BottomSheetFlatList
                 data={filteredOptions}
                 keyExtractor={(option: any) => option.value}
                 renderItem={renderSelectOption}
                 ListEmptyComponent={renderEmptyComponent}
+                testID={testID ? `${testID}-options` : undefined}
                 {...listProps}
               />
             )}