@utilitywarehouse/hearth-react-native 0.28.2 → 0.28.3

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
 
-> @utilitywarehouse/hearth-react-native@0.28.2 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.2 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 .
 
 
@@ -56,13 +56,13 @@
 
 Rule                                      | Time (ms) | Relative
 :-----------------------------------------|----------:|--------:
-@typescript-eslint/no-unused-vars         |  1611.506 |    62.8%
-react-hooks/exhaustive-deps               |   121.253 |     4.7%
-react-hooks/rules-of-hooks                |    88.872 |     3.5%
-no-global-assign                          |    73.109 |     2.8%
-no-misleading-character-class             |    41.972 |     1.6%
-no-unexpected-multiline                   |    39.944 |     1.6%
-no-regex-spaces                           |    37.157 |     1.4%
-@typescript-eslint/ban-ts-comment         |    31.755 |     1.2%
-no-useless-escape                         |    28.823 |     1.1%
-@typescript-eslint/triple-slash-reference |    28.052 |     1.1%
+@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,11 @@
 # @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

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/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,12 @@ 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

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.2",
+  "version": "0.28.3",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",

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.