@utilitywarehouse/hearth-react-native 0.30.4-testid-fix-2 → 0.31.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (93) hide show
  1. package/.turbo/turbo-build.log +4 -5
  2. package/.turbo/turbo-lint.log +62 -70
  3. package/CHANGELOG.md +155 -0
  4. package/build/components/Badge/Badge.js +2 -2
  5. package/build/components/Badge/Badge.props.d.ts +1 -0
  6. package/build/components/Badge/BadgeText.d.ts +1 -1
  7. package/build/components/Badge/BadgeText.js +2 -2
  8. package/build/components/Container/Container.props.d.ts +2 -2
  9. package/build/components/ExpandableCard/ExpandableCard.d.ts +1 -1
  10. package/build/components/ExpandableCard/ExpandableCard.js +13 -2
  11. package/build/components/ExpandableCard/ExpandableCard.props.d.ts +43 -23
  12. package/build/components/ExpandableCard/ExpandableCardText.js +1 -1
  13. package/build/components/ExpandableCard/ExpandableCardTrigger.d.ts +3 -3
  14. package/build/components/ExpandableCard/ExpandableCardTrigger.props.d.ts +31 -6
  15. package/build/components/ExpandableCard/ExpandableCardTriggerRoot.d.ts +1 -1
  16. package/build/components/ExpandableCard/ExpandableCardTriggerRoot.js +13 -2
  17. package/build/components/Flex/Flex.props.d.ts +2 -2
  18. package/build/components/FormField/FormField.d.ts +5 -5
  19. package/build/components/FormField/FormField.js +3 -2
  20. package/build/components/Modal/Modal.d.ts +1 -1
  21. package/build/components/Modal/Modal.js +33 -39
  22. package/build/components/Modal/Modal.props.d.ts +8 -3
  23. package/build/components/Modal/Modal.shared.types.d.ts +19 -4
  24. package/build/components/Modal/Modal.web.d.ts +1 -1
  25. package/build/components/Modal/Modal.web.js +6 -3
  26. package/build/components/NavModal/NavModal.d.ts +1 -1
  27. package/build/components/NavModal/NavModal.js +10 -7
  28. package/build/components/NavModal/NavModal.props.d.ts +4 -3
  29. package/build/components/Textarea/Textarea.d.ts +1 -1
  30. package/build/components/Textarea/Textarea.js +64 -5
  31. package/build/components/Textarea/Textarea.props.d.ts +10 -0
  32. package/build/components/Textarea/TextareaRoot.js +4 -1
  33. package/docs/changelog.mdx +21 -0
  34. package/package.json +4 -4
  35. package/src/components/Badge/Badge.props.ts +1 -0
  36. package/src/components/Badge/Badge.tsx +6 -1
  37. package/src/components/Badge/BadgeText.tsx +8 -2
  38. package/src/components/Container/Container.props.ts +10 -1
  39. package/src/components/ExpandableCard/ExpandableCard.docs.mdx +89 -37
  40. package/src/components/ExpandableCard/ExpandableCard.props.ts +51 -27
  41. package/src/components/ExpandableCard/ExpandableCard.stories.tsx +67 -17
  42. package/src/components/ExpandableCard/ExpandableCard.tsx +15 -7
  43. package/src/components/ExpandableCard/ExpandableCardText.tsx +1 -1
  44. package/src/components/ExpandableCard/ExpandableCardTrigger.props.ts +37 -7
  45. package/src/components/ExpandableCard/ExpandableCardTriggerRoot.tsx +36 -2
  46. package/src/components/Flex/Flex.props.ts +16 -2
  47. package/src/components/FormField/FormField.tsx +2 -1
  48. package/src/components/List/List.stories.tsx +35 -0
  49. package/src/components/Modal/Modal.docs.mdx +52 -1
  50. package/src/components/Modal/Modal.props.ts +21 -6
  51. package/src/components/Modal/Modal.shared.types.ts +23 -4
  52. package/src/components/Modal/Modal.stories.tsx +165 -1
  53. package/src/components/Modal/Modal.tsx +101 -81
  54. package/src/components/Modal/Modal.web.tsx +29 -23
  55. package/src/components/NavModal/NavModal.docs.mdx +29 -0
  56. package/src/components/NavModal/NavModal.props.ts +11 -3
  57. package/src/components/NavModal/NavModal.stories.tsx +29 -0
  58. package/src/components/NavModal/NavModal.tsx +39 -33
  59. package/src/components/Textarea/Textarea.docs.mdx +33 -1
  60. package/src/components/Textarea/Textarea.props.ts +11 -2
  61. package/src/components/Textarea/Textarea.stories.tsx +21 -1
  62. package/src/components/Textarea/Textarea.tsx +107 -3
  63. package/src/components/Textarea/TextareaRoot.tsx +6 -2
  64. package/build/components/DatePicker/TimePicker.d.ts +0 -3
  65. package/build/components/DatePicker/TimePicker.js +0 -84
  66. package/build/components/DatePicker/time-picker/animated-math.d.ts +0 -4
  67. package/build/components/DatePicker/time-picker/animated-math.js +0 -19
  68. package/build/components/DatePicker/time-picker/period-native.d.ts +0 -6
  69. package/build/components/DatePicker/time-picker/period-native.js +0 -17
  70. package/build/components/DatePicker/time-picker/period-picker.d.ts +0 -6
  71. package/build/components/DatePicker/time-picker/period-picker.js +0 -10
  72. package/build/components/DatePicker/time-picker/period-web.d.ts +0 -6
  73. package/build/components/DatePicker/time-picker/period-web.js +0 -21
  74. package/build/components/DatePicker/time-picker/wheel-native.d.ts +0 -8
  75. package/build/components/DatePicker/time-picker/wheel-native.js +0 -19
  76. package/build/components/DatePicker/time-picker/wheel-picker/index.d.ts +0 -2
  77. package/build/components/DatePicker/time-picker/wheel-picker/index.js +0 -2
  78. package/build/components/DatePicker/time-picker/wheel-picker/wheel-picker-item.d.ts +0 -16
  79. package/build/components/DatePicker/time-picker/wheel-picker/wheel-picker-item.js +0 -97
  80. package/build/components/DatePicker/time-picker/wheel-picker/wheel-picker.d.ts +0 -21
  81. package/build/components/DatePicker/time-picker/wheel-picker/wheel-picker.js +0 -88
  82. package/build/components/DatePicker/time-picker/wheel-picker/wheel-picker.style.d.ts +0 -23
  83. package/build/components/DatePicker/time-picker/wheel-picker/wheel-picker.style.js +0 -21
  84. package/build/components/DatePicker/time-picker/wheel-web.d.ts +0 -8
  85. package/build/components/DatePicker/time-picker/wheel-web.js +0 -146
  86. package/build/components/DatePicker/time-picker/wheel.d.ts +0 -8
  87. package/build/components/DatePicker/time-picker/wheel.js +0 -10
  88. package/build/components/SafeAreaView/SafeAreaView.d.ts +0 -5
  89. package/build/components/SafeAreaView/SafeAreaView.js +0 -117
  90. package/build/components/SafeAreaView/SafeAreaView.props.d.ts +0 -17
  91. package/build/components/SafeAreaView/SafeAreaView.props.js +0 -1
  92. package/build/components/SafeAreaView/index.d.ts +0 -2
  93. package/build/components/SafeAreaView/index.js +0 -1
@@ -1,5 +1,4 @@
1
-
2
- 
3
- > @utilitywarehouse/hearth-react-native@0.30.4-testid-fix-2 build /Users/filmondaniels/Projects/Work/hearth/packages/react-native
4
- > tsc
5
-
1
+
2
+ > @utilitywarehouse/hearth-react-native@0.31.0 build /home/runner/work/hearth/hearth/packages/react-native
3
+ > tsc
4
+
@@ -1,70 +1,62 @@
1
-
2
- 
3
- > @utilitywarehouse/hearth-react-native@0.27.2 lint /Users/filmondaniels/Projects/Work/hearth/packages/react-native
4
- > TIMING=1 eslint .
5
-
6
- 
7
- /Users/filmondaniels/Projects/Work/hearth/packages/react-native/src/components/Carousel/Carousel.context.tsx
8
-  6:14 warning Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components react-refresh/only-export-components
9
- 
10
- /Users/filmondaniels/Projects/Work/hearth/packages/react-native/src/components/Carousel/Carousel.tsx
11
-  146:6 warning React Hook useMemo has a missing dependency: 'hasCarouselControlsInTree'. Either include it or remove the dependency array react-hooks/exhaustive-deps
12
- 
13
- /Users/filmondaniels/Projects/Work/hearth/packages/react-native/src/components/DatePicker/DatePicker.tsx
14
-  109:6 warning React Hook useCallback has an unnecessary dependency: 'modalRef.current'. Either exclude it or remove the dependency array. Mutable values like 'modalRef.current' aren't valid dependencies because mutating them doesn't re-render the component react-hooks/exhaustive-deps
15
-  259:6 warning React Hook useEffect has a missing dependency: 'initialState'. Either include it or remove the dependency array react-hooks/exhaustive-deps
16
-  346:6 warning React Hook useEffect has a missing dependency: 'onChange'. Either include it or remove the dependency array react-hooks/exhaustive-deps
17
-  468:5 warning React Hook useCallback has a missing dependency: 'onChange'. Either include it or remove the dependency array react-hooks/exhaustive-deps
18
-  536:6 warning React Hook useEffect has a missing dependency: 'onSelectMonth'. Either include it or remove the dependency array react-hooks/exhaustive-deps
19
-  542:6 warning React Hook useEffect has a missing dependency: 'onSelectYear'. Either include it or remove the dependency array react-hooks/exhaustive-deps
20
- 
21
- /Users/filmondaniels/Projects/Work/hearth/packages/react-native/src/components/DatePicker/DatePickerDay.tsx
22
-  76:6 warning React Hook useMemo has an unnecessary dependency: 'styles.rangeRoot'. Either exclude it or remove the dependency array. Outer scope values like 'styles.rangeRoot' aren't valid dependencies because mutating them doesn't re-render the component react-hooks/exhaustive-deps
23
-  84:6 warning React Hook useMemo has a missing dependency: 'isSelected'. Either include it or remove the dependency array react-hooks/exhaustive-deps
24
- 
25
- /Users/filmondaniels/Projects/Work/hearth/packages/react-native/src/components/DatePicker/DatePickerDays.tsx
26
-  179:6 warning React Hook useMemo has unnecessary dependencies: 'month' and 'year'. Either exclude them or remove the dependency array react-hooks/exhaustive-deps
27
- 
28
- /Users/filmondaniels/Projects/Work/hearth/packages/react-native/src/components/DatePicker/DatePickerYears.tsx
29
-  52:6 warning React Hook useCallback has a missing dependency: 'containerHeight'. Either include it or remove the dependency array. Outer scope values like 'styles' aren't valid dependencies because mutating them doesn't re-render the component react-hooks/exhaustive-deps
30
- 
31
- /Users/filmondaniels/Projects/Work/hearth/packages/react-native/src/components/Input/Input.tsx
32
-  78:8 warning React Hook useEffect has a missing dependency: 'formFieldContext'. Either include it or remove the dependency array react-hooks/exhaustive-deps
33
- 
34
- /Users/filmondaniels/Projects/Work/hearth/packages/react-native/src/components/Modal/Modal.tsx
35
-  93:6 warning React Hook useCallback has an unnecessary dependency: 'Platform.OS'. Either exclude it or remove the dependency array. Outer scope values like 'Platform.OS' aren't valid dependencies because mutating them doesn't re-render the component react-hooks/exhaustive-deps
36
-  330:5 warning React Hook useCallback has a missing dependency: 'footer'. Either include it or remove the dependency array react-hooks/exhaustive-deps
37
- 
38
- /Users/filmondaniels/Projects/Work/hearth/packages/react-native/src/components/Modal/Modal.web.tsx
39
-  66:6 warning React Hook useCallback has an unnecessary dependency: 'Platform.OS'. Either exclude it or remove the dependency array. Outer scope values like 'Platform.OS' aren't valid dependencies because mutating them doesn't re-render the component react-hooks/exhaustive-deps
40
- 
41
- /Users/filmondaniels/Projects/Work/hearth/packages/react-native/src/components/PillGroup/PillGroup.tsx
42
-  17:9 warning The 'normalizedValue' conditional could make the dependencies of useMemo Hook (at line 33) change on every render. Move it inside the useMemo callback. Alternatively, wrap the initialization of 'normalizedValue' in its own useMemo() Hook react-hooks/exhaustive-deps
43
- 
44
- /Users/filmondaniels/Projects/Work/hearth/packages/react-native/src/components/Tabs/Tabs.tsx
45
-  53:6 warning React Hook useEffect has a missing dependency: 'tabValues'. Either include it or remove the dependency array react-hooks/exhaustive-deps
46
-  53:7 warning React Hook useEffect has a complex expression in the dependency array. Extract it to a separate variable so it can be statically checked react-hooks/exhaustive-deps
47
-  104:5 warning React Hook useMemo has an unnecessary dependency: 'tabValues'. Either exclude it or remove the dependency array react-hooks/exhaustive-deps
48
-  127:62 warning React Hook useEffect has a complex expression in the dependency array. Extract it to a separate variable so it can be statically checked react-hooks/exhaustive-deps
49
- 
50
- /Users/filmondaniels/Projects/Work/hearth/packages/react-native/src/components/Textarea/Textarea.tsx
51
-  45:6 warning React Hook useEffect has a missing dependency: 'formFieldContext'. Either include it or remove the dependency array react-hooks/exhaustive-deps
52
- 
53
- /Users/filmondaniels/Projects/Work/hearth/packages/react-native/src/components/Toast/Toast.context.tsx
54
-  14:14 warning Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components react-refresh/only-export-components
55
-  106:14 warning Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components react-refresh/only-export-components
56
- 
57
- ✖ 24 problems (0 errors, 24 warnings)
58
- 
59
- Rule | Time (ms) | Relative
60
- :-----------------------------------------|----------:|--------:
61
- @typescript-eslint/no-unused-vars | 436.390 | 62.5%
62
- react-hooks/exhaustive-deps | 28.433 | 4.1%
63
- no-global-assign | 25.595 | 3.7%
64
- react-hooks/rules-of-hooks | 20.152 | 2.9%
65
- @typescript-eslint/ban-ts-comment | 17.023 | 2.4%
66
- no-misleading-character-class | 12.606 | 1.8%
67
- @typescript-eslint/no-unused-expressions | 9.189 | 1.3%
68
- no-unexpected-multiline | 8.943 | 1.3%
69
- @typescript-eslint/triple-slash-reference | 8.378 | 1.2%
70
- no-loss-of-precision | 8.049 | 1.2%
1
+
2
+ > @utilitywarehouse/hearth-react-native@0.31.0 lint /home/runner/work/hearth/hearth/packages/react-native
3
+ > TIMING=1 eslint .
4
+
5
+
6
+ /home/runner/work/hearth/hearth/packages/react-native/src/components/Carousel/Carousel.context.tsx
7
+ 6:14 warning Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components react-refresh/only-export-components
8
+
9
+ /home/runner/work/hearth/hearth/packages/react-native/src/components/Carousel/Carousel.tsx
10
+ 146:6 warning React Hook useMemo has a missing dependency: 'hasCarouselControlsInTree'. Either include it or remove the dependency array react-hooks/exhaustive-deps
11
+
12
+ /home/runner/work/hearth/hearth/packages/react-native/src/components/DatePicker/DatePicker.tsx
13
+ 109:6 warning React Hook useCallback has an unnecessary dependency: 'modalRef.current'. Either exclude it or remove the dependency array. Mutable values like 'modalRef.current' aren't valid dependencies because mutating them doesn't re-render the component react-hooks/exhaustive-deps
14
+ 259:6 warning React Hook useEffect has a missing dependency: 'initialState'. Either include it or remove the dependency array react-hooks/exhaustive-deps
15
+ 346:6 warning React Hook useEffect has a missing dependency: 'onChange'. Either include it or remove the dependency array react-hooks/exhaustive-deps
16
+ 468:5 warning React Hook useCallback has a missing dependency: 'onChange'. Either include it or remove the dependency array react-hooks/exhaustive-deps
17
+ 536:6 warning React Hook useEffect has a missing dependency: 'onSelectMonth'. Either include it or remove the dependency array react-hooks/exhaustive-deps
18
+ 542:6 warning React Hook useEffect has a missing dependency: 'onSelectYear'. Either include it or remove the dependency array react-hooks/exhaustive-deps
19
+
20
+ /home/runner/work/hearth/hearth/packages/react-native/src/components/DatePicker/DatePickerDay.tsx
21
+ 76:6 warning React Hook useMemo has an unnecessary dependency: 'styles.rangeRoot'. Either exclude it or remove the dependency array. Outer scope values like 'styles.rangeRoot' aren't valid dependencies because mutating them doesn't re-render the component react-hooks/exhaustive-deps
22
+ 84:6 warning React Hook useMemo has a missing dependency: 'isSelected'. Either include it or remove the dependency array react-hooks/exhaustive-deps
23
+
24
+ /home/runner/work/hearth/hearth/packages/react-native/src/components/DatePicker/DatePickerDays.tsx
25
+ 179:6 warning React Hook useMemo has unnecessary dependencies: 'month' and 'year'. Either exclude them or remove the dependency array react-hooks/exhaustive-deps
26
+
27
+ /home/runner/work/hearth/hearth/packages/react-native/src/components/DatePicker/DatePickerYears.tsx
28
+ 52:6 warning React Hook useCallback has a missing dependency: 'containerHeight'. Either include it or remove the dependency array. Outer scope values like 'styles' aren't valid dependencies because mutating them doesn't re-render the component react-hooks/exhaustive-deps
29
+
30
+ /home/runner/work/hearth/hearth/packages/react-native/src/components/Input/Input.tsx
31
+ 78:8 warning React Hook useEffect has a missing dependency: 'formFieldContext'. Either include it or remove the dependency array react-hooks/exhaustive-deps
32
+
33
+ /home/runner/work/hearth/hearth/packages/react-native/src/components/PillGroup/PillGroup.tsx
34
+ 17:9 warning The 'normalizedValue' conditional could make the dependencies of useMemo Hook (at line 33) change on every render. Move it inside the useMemo callback. Alternatively, wrap the initialization of 'normalizedValue' in its own useMemo() Hook react-hooks/exhaustive-deps
35
+
36
+ /home/runner/work/hearth/hearth/packages/react-native/src/components/Table/Table.context.tsx
37
+ 23:14 warning Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components react-refresh/only-export-components
38
+
39
+ /home/runner/work/hearth/hearth/packages/react-native/src/components/Tabs/Tabs.tsx
40
+ 53:6 warning React Hook useEffect has a missing dependency: 'tabValues'. Either include it or remove the dependency array react-hooks/exhaustive-deps
41
+ 53:7 warning React Hook useEffect has a complex expression in the dependency array. Extract it to a separate variable so it can be statically checked react-hooks/exhaustive-deps
42
+ 104:5 warning React Hook useMemo has an unnecessary dependency: 'tabValues'. Either exclude it or remove the dependency array react-hooks/exhaustive-deps
43
+ 127:62 warning React Hook useEffect has a complex expression in the dependency array. Extract it to a separate variable so it can be statically checked react-hooks/exhaustive-deps
44
+
45
+ /home/runner/work/hearth/hearth/packages/react-native/src/components/Toast/Toast.context.tsx
46
+ 14:14 warning Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components react-refresh/only-export-components
47
+ 106:14 warning Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components react-refresh/only-export-components
48
+
49
+ ✖ 21 problems (0 errors, 21 warnings)
50
+
51
+ Rule | Time (ms) | Relative
52
+ :---------------------------------|----------:|--------:
53
+ @typescript-eslint/no-unused-vars | 1597.954 | 62.7%
54
+ react-hooks/exhaustive-deps | 115.835 | 4.5%
55
+ no-global-assign | 84.158 | 3.3%
56
+ react-hooks/rules-of-hooks | 72.932 | 2.9%
57
+ no-loss-of-precision | 56.146 | 2.2%
58
+ no-unexpected-multiline | 49.645 | 1.9%
59
+ no-misleading-character-class | 42.468 | 1.7%
60
+ @typescript-eslint/ban-ts-comment | 32.905 | 1.3%
61
+ no-useless-escape | 31.038 | 1.2%
62
+ no-control-regex | 24.764 | 1.0%
package/CHANGELOG.md CHANGED
@@ -1,5 +1,160 @@
1
1
  # @utilitywarehouse/hearth-react-native
2
2
 
3
+ ## 0.31.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#1108](https://github.com/utilitywarehouse/hearth/pull/1108) [`8c2f3b5`](https://github.com/utilitywarehouse/hearth/commit/8c2f3b5334de83a7dd799b857394a34209b748e7) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add margin, padding, and layout utility props to `Flex`.
8
+
9
+ `Flex` now exposes the shared margin and padding utility props, along with the existing layout utility prop surface, so it can be used more like other layout primitives such as `Card`.
10
+
11
+ **Component affected**:
12
+ - `Flex`
13
+
14
+ **Developer changes**:
15
+
16
+ You can now apply spacing and layout utility props directly on `Flex`:
17
+
18
+ ```tsx
19
+ <Flex direction="row" spacing="md" padding="300" marginTop="200" flex={1}>
20
+ <Button>Back</Button>
21
+ <Button>Continue</Button>
22
+ </Flex>
23
+ ```
24
+
25
+ - [#1104](https://github.com/utilitywarehouse/hearth/pull/1104) [`91feeab`](https://github.com/utilitywarehouse/hearth/commit/91feeab091ae6bf80e543f9196214066ce8b29b0) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add custom trigger content options to `ExpandableCard`.
26
+
27
+ `ExpandableCard` now supports a `triggerContent` prop for replacing the default trigger layout while keeping the chevron. `ExpandableCardTrigger` also now supports `children` with an optional `showChevron` prop, so you can fully compose the trigger content yourself and still opt in to the built-in expand/collapse chevron.
28
+
29
+ **Components affected**:
30
+ - `ExpandableCard`
31
+ - `ExpandableCardTrigger`
32
+
33
+ **Developer changes**:
34
+
35
+ Use `triggerContent` when you want a single prop on `ExpandableCard` to replace the standard trigger content:
36
+
37
+ ```tsx
38
+ <ExpandableCard
39
+ triggerContent={<BodyText weight="semibold">March bill ready</BodyText>}
40
+ expandedContent={<BodyText>Balance: £89.50</BodyText>}
41
+ />
42
+ ```
43
+
44
+ Use `ExpandableCardTrigger` children when you want full control over the trigger structure. Add `showChevron` if you still want the built-in chevron:
45
+
46
+ ```tsx
47
+ <ExpandableCardTrigger isExpanded={expanded} onPress={toggleExpanded} showChevron>
48
+ <ExpandableCardContent>
49
+ <ExpandableCardText>Custom trigger</ExpandableCardText>
50
+ </ExpandableCardContent>
51
+ </ExpandableCardTrigger>
52
+ ```
53
+
54
+ - [#1109](https://github.com/utilitywarehouse/hearth/pull/1109) [`8215550`](https://github.com/utilitywarehouse/hearth/commit/8215550745d08a8b4c18a6902e39d3199018092a) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add `numberOfLines` support to `Badge` text.
55
+
56
+ `Badge` now renders its text content on a single line by default and supports a new `numberOfLines` prop when you want to allow more lines.
57
+
58
+ **Components affected**:
59
+ - `Badge`
60
+
61
+ **Developer changes**:
62
+
63
+ No changes are required unless you want a `Badge` to wrap onto more than one line. To opt in, pass `numberOfLines`:
64
+
65
+ ```tsx
66
+ <Badge numberOfLines={2} text="Long badge text that can wrap onto a second line" />
67
+ ```
68
+
69
+ - [#1108](https://github.com/utilitywarehouse/hearth/pull/1108) [`8c2f3b5`](https://github.com/utilitywarehouse/hearth/commit/8c2f3b5334de83a7dd799b857394a34209b748e7) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add custom footer support to `Modal` and `NavModal`.
70
+
71
+ `Modal` and `NavModal` now support a `footer` prop for replacing the built-in primary and secondary action buttons with custom content, plus a `footerStyle` prop for styling the footer container. When `footer` is provided, the button props are now disallowed at the type level.
72
+
73
+ **Components affected**:
74
+ - `Modal`
75
+ - `NavModal`
76
+
77
+ **Developer changes**:
78
+
79
+ Use `footer` when you need a custom footer layout, such as horizontal actions or extra decoration:
80
+
81
+ ```tsx
82
+ <Modal
83
+ heading="Update billing details"
84
+ footer={
85
+ <Flex direction="row" spacing="md" pt="250">
86
+ <Button variant="outline" colorScheme="functional" style={{ flex: 1 }}>
87
+ Cancel
88
+ </Button>
89
+ <Button style={{ flex: 1 }}>Save changes</Button>
90
+ </Flex>
91
+ }
92
+ footerStyle={{
93
+ boxShadow: '0px -6px 12px rgba(16, 24, 40, 0.12)',
94
+ }}
95
+ />
96
+ ```
97
+
98
+ - [#1103](https://github.com/utilitywarehouse/hearth/pull/1103) [`e375a44`](https://github.com/utilitywarehouse/hearth/commit/e375a442c507da1807e49f4d78e44edfff51d245) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add optional vertical resizing to `Textarea`.
99
+
100
+ `Textarea` now supports a new `resizable` prop that adds a bottom-right drag handle so people can increase the field height when they need more space for longer content.
101
+
102
+ **Components affected**:
103
+ - `Textarea`
104
+
105
+ **Developer changes**:
106
+
107
+ No changes are required unless you want to enable resizing for a textarea. To opt in, pass the new `resizable` prop:
108
+
109
+ ```tsx
110
+ <Textarea
111
+ label="Additional notes"
112
+ helperText="Drag the corner handle to resize"
113
+ placeholder="Enter your text here..."
114
+ resizable
115
+ />
116
+ ```
117
+
118
+ - [#1108](https://github.com/utilitywarehouse/hearth/pull/1108) [`8c2f3b5`](https://github.com/utilitywarehouse/hearth/commit/8c2f3b5334de83a7dd799b857394a34209b748e7) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add flex utility props to `Container`.
119
+
120
+ `Container` now exposes shared flex layout utility props, allowing layout properties such as `flex`, `alignItems`, `justifyContent`, and `flexDirection` to be applied directly through its public prop API.
121
+
122
+ **Component affected**:
123
+ - `Container`
124
+
125
+ **Developer changes**:
126
+
127
+ You can now combine `Container`'s existing spacing props with flex layout props:
128
+
129
+ ```tsx
130
+ <Container flex={1} justifyContent="center" alignItems="stretch" gap="200">
131
+ <BodyText>Content</BodyText>
132
+ </Container>
133
+ ```
134
+
135
+ ### Patch Changes
136
+
137
+ - [#1103](https://github.com/utilitywarehouse/hearth/pull/1103) [`e375a44`](https://github.com/utilitywarehouse/hearth/commit/e375a442c507da1807e49f4d78e44edfff51d245) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: Render FormField optional text with regular weight instead of inheriting the label weight.
138
+
139
+ This fixes FormField labels that append `(Optional)` so the optional text no longer inherits the main label weight.
140
+
141
+ **Components affected**:
142
+ - `FormField`
143
+ - `Textarea`
144
+ - `Input`
145
+
146
+ **Developer changes**:
147
+
148
+ No changes are required.
149
+
150
+ - [#1104](https://github.com/utilitywarehouse/hearth/pull/1104) [`91feeab`](https://github.com/utilitywarehouse/hearth/commit/91feeab091ae6bf80e543f9196214066ce8b29b0) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: `ExpandableCard` heading font size and weight
151
+
152
+ ## 0.30.4
153
+
154
+ ### Patch Changes
155
+
156
+ - [#1096](https://github.com/utilitywarehouse/hearth/pull/1096) [`6fd9021`](https://github.com/utilitywarehouse/hearth/commit/6fd9021a91ef38b56b78755965515a0807b34fa1) Thanks [@fillyD](https://github.com/fillyD)! - 🐛 [FIX]: Restore visibility of bottom sheet content in iOS accessibility tree, enabling automated tests to interact with `Select` options
157
+
3
158
  ## 0.30.3
4
159
 
5
160
  ### Patch Changes
@@ -6,11 +6,11 @@ import { BadgeContext } from './Badge.context';
6
6
  import BadgeIcon from './BadgeIcon';
7
7
  import BadgeText from './BadgeText';
8
8
  const Badge = ({ children, ...props }) => {
9
- const { variant = 'subtle', icon, colorScheme = 'info', flatBase = false, size = 'sm', style, text, ...rest } = props;
9
+ const { variant = 'subtle', icon, colorScheme = 'info', flatBase = false, size = 'sm', style, text, numberOfLines, ...rest } = props;
10
10
  const value = useMemo(() => ({ colorScheme, flatBase, variant, size }), [colorScheme, flatBase, variant, size]);
11
11
  const childIsText = typeof children === 'string' || typeof children === 'number' || !!text;
12
12
  styles.useVariants({ colorScheme, flatBase, variant, size });
13
- return (_jsx(BadgeContext.Provider, { value: value, children: _jsxs(View, { ...rest, style: [styles.container, style], children: [!!icon && _jsx(BadgeIcon, { as: icon }), childIsText ? _jsx(BadgeText, { children: text ?? children }) : children] }) }));
13
+ return (_jsx(BadgeContext.Provider, { value: value, children: _jsxs(View, { ...rest, style: [styles.container, style], children: [!!icon && _jsx(BadgeIcon, { as: icon }), childIsText ? (_jsx(BadgeText, { numberOfLines: numberOfLines, children: text ?? children })) : (children)] }) }));
14
14
  };
15
15
  Badge.displayName = 'Badge';
16
16
  const styles = StyleSheet.create(theme => ({
@@ -7,5 +7,6 @@ interface BadgeProps extends ViewProps {
7
7
  icon?: ComponentType;
8
8
  flatBase?: boolean;
9
9
  text?: string | number;
10
+ numberOfLines?: number;
10
11
  }
11
12
  export default BadgeProps;
@@ -1,6 +1,6 @@
1
1
  import { TextProps } from 'react-native';
2
2
  declare const BadgeText: {
3
- ({ children, style, ...props }: TextProps): import("react/jsx-runtime").JSX.Element;
3
+ ({ children, style, numberOfLines, ...props }: TextProps): import("react/jsx-runtime").JSX.Element;
4
4
  displayName: string;
5
5
  };
6
6
  export default BadgeText;
@@ -2,10 +2,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { StyleSheet } from 'react-native-unistyles';
3
3
  import { BodyText } from '../BodyText';
4
4
  import { useBadgeContext } from './Badge.context';
5
- const BadgeText = ({ children, style, ...props }) => {
5
+ const BadgeText = ({ children, style, numberOfLines = 1, ...props }) => {
6
6
  const { variant, colorScheme, size } = useBadgeContext();
7
7
  styles.useVariants({ variant, colorScheme });
8
- return (_jsx(BodyText, { ...props, size: size, weight: "semibold", style: [styles.text, style], children: children }));
8
+ return (_jsx(BodyText, { ...props, numberOfLines: numberOfLines, size: size, weight: "semibold", style: [styles.text, style], children: children }));
9
9
  };
10
10
  BadgeText.displayName = 'BadgeText';
11
11
  const styles = StyleSheet.create(theme => ({
@@ -1,6 +1,6 @@
1
1
  import type { ViewProps } from 'react-native';
2
- import type { BackgroundColorProps, GapProps, MarginProps, PaddingProps, SpacingValues } from '../../types';
3
- interface ContainerProps extends ViewProps, MarginProps, PaddingProps, GapProps, BackgroundColorProps {
2
+ import type { BackgroundColorProps, DisplayProps, FlexLayoutProps, GapProps, MarginProps, PaddingProps, SpacingValues } from '../../types';
3
+ interface ContainerProps extends ViewProps, MarginProps, PaddingProps, GapProps, BackgroundColorProps, FlexLayoutProps, DisplayProps {
4
4
  /**
5
5
  * The spacing between child elements (gap).
6
6
  */
@@ -1,6 +1,6 @@
1
1
  import type ExpandableCardProps from './ExpandableCard.props';
2
2
  declare const ExpandableCard: {
3
- ({ expanded: controlledExpanded, onExpandedChange, heading, helperText, leadingIcon, leadingContent, badge, badgePosition, numericValue, expandedContent, duration, animateOpacity, disabled, testID, children, ...cardProps }: ExpandableCardProps): import("react/jsx-runtime").JSX.Element;
3
+ ({ expanded: controlledExpanded, onExpandedChange, heading, helperText, leadingIcon, leadingContent, badge, badgePosition, numericValue, triggerContent, expandedContent, duration, animateOpacity, disabled, testID, children, ...cardProps }: ExpandableCardProps): import("react/jsx-runtime").JSX.Element;
4
4
  displayName: string;
5
5
  };
6
6
  export default ExpandableCard;
@@ -3,7 +3,7 @@ import { useState } from 'react';
3
3
  import { Card } from '../Card';
4
4
  import ExpandableCardExpandedContent from './ExpandableCardExpandedContent';
5
5
  import ExpandableCardTrigger from './ExpandableCardTrigger';
6
- const ExpandableCard = ({ expanded: controlledExpanded, onExpandedChange, heading, helperText, leadingIcon, leadingContent, badge, badgePosition = 'bottom', numericValue, expandedContent, duration = 200, animateOpacity = true, disabled = false, testID = 'expandable-card', children, ...cardProps }) => {
6
+ const ExpandableCard = ({ expanded: controlledExpanded, onExpandedChange, heading, helperText, leadingIcon, leadingContent, badge, badgePosition = 'bottom', numericValue, triggerContent, expandedContent, duration = 200, animateOpacity = true, disabled = false, testID = 'expandable-card', children, ...cardProps }) => {
7
7
  const [internalExpanded, setInternalExpanded] = useState(false);
8
8
  // Use controlled or uncontrolled state
9
9
  const isExpanded = controlledExpanded !== undefined ? controlledExpanded : internalExpanded;
@@ -16,7 +16,18 @@ const ExpandableCard = ({ expanded: controlledExpanded, onExpandedChange, headin
16
16
  }
17
17
  onExpandedChange?.(newExpanded);
18
18
  };
19
- const renderDefaultContent = () => (_jsxs(_Fragment, { children: [_jsx(ExpandableCardTrigger, { onPress: handlePress, disabled: disabled, heading: heading, helperText: helperText, leadingIcon: leadingIcon, leadingContent: leadingContent, badge: badge, badgePosition: badgePosition, numericValue: numericValue, isExpanded: isExpanded, testID: `${testID}-trigger` }), _jsx(ExpandableCardExpandedContent, { isExpanded: isExpanded, duration: duration, animateOpacity: animateOpacity, children: expandedContent })] }));
19
+ const triggerProps = triggerContent !== undefined
20
+ ? { triggerContent }
21
+ : {
22
+ heading,
23
+ helperText,
24
+ leadingIcon,
25
+ leadingContent,
26
+ badge,
27
+ badgePosition,
28
+ numericValue,
29
+ };
30
+ const renderDefaultContent = () => (_jsxs(_Fragment, { children: [_jsx(ExpandableCardTrigger, { onPress: handlePress, disabled: disabled, ...triggerProps, isExpanded: isExpanded, testID: `${testID}-trigger` }), _jsx(ExpandableCardExpandedContent, { isExpanded: isExpanded, duration: duration, animateOpacity: animateOpacity, children: expandedContent })] }));
20
31
  return (_jsx(Card, { noPadding: true, ...cardProps, testID: testID, children: children || renderDefaultContent() }));
21
32
  };
22
33
  ExpandableCard.displayName = 'ExpandableCard';
@@ -1,6 +1,6 @@
1
1
  import type { ComponentType, ReactNode } from 'react';
2
2
  import type CardProps from '../Card/Card.props';
3
- export interface ExpandableCardProps extends Omit<CardProps, 'children'> {
3
+ interface ExpandableCardSharedProps extends Omit<CardProps, 'children'> {
4
4
  /**
5
5
  * Whether the card is expanded
6
6
  */
@@ -9,6 +9,34 @@ export interface ExpandableCardProps extends Omit<CardProps, 'children'> {
9
9
  * Callback when expanded state changes
10
10
  */
11
11
  onExpandedChange?: (expanded: boolean) => void;
12
+ /**
13
+ * The heading text displayed in the trigger
14
+ */
15
+ expandedContent?: ReactNode;
16
+ /**
17
+ * Duration of the expansion animation in milliseconds
18
+ * @default 200
19
+ */
20
+ duration?: number;
21
+ /**
22
+ * Whether to animate opacity during expansion
23
+ * @default true
24
+ */
25
+ animateOpacity?: boolean;
26
+ /**
27
+ * Whether the card is disabled
28
+ */
29
+ disabled?: boolean;
30
+ /**
31
+ * Test ID for testing
32
+ */
33
+ testID?: string;
34
+ /**
35
+ * Custom children for advanced composition
36
+ */
37
+ children?: ReactNode;
38
+ }
39
+ interface ExpandableCardDefaultTriggerProps {
12
40
  /**
13
41
  * The heading text displayed in the trigger
14
42
  */
@@ -39,30 +67,22 @@ export interface ExpandableCardProps extends Omit<CardProps, 'children'> {
39
67
  */
40
68
  numericValue?: string | number;
41
69
  /**
42
- * The content to show when expanded
43
- */
44
- expandedContent?: ReactNode;
45
- /**
46
- * Duration of the expansion animation in milliseconds
47
- * @default 200
48
- */
49
- duration?: number;
50
- /**
51
- * Whether to animate opacity during expansion
52
- * @default true
53
- */
54
- animateOpacity?: boolean;
55
- /**
56
- * Whether the card is disabled
57
- */
58
- disabled?: boolean;
59
- /**
60
- * Test ID for testing
70
+ * Custom trigger content that replaces the default trigger layout.
61
71
  */
62
- testID?: string;
72
+ triggerContent?: never;
73
+ }
74
+ interface ExpandableCardCustomTriggerProps {
63
75
  /**
64
- * Custom children for advanced composition
76
+ * Custom trigger content that replaces the default trigger layout.
65
77
  */
66
- children?: ReactNode;
78
+ triggerContent: ReactNode;
79
+ heading?: never;
80
+ helperText?: never;
81
+ leadingIcon?: never;
82
+ leadingContent?: never;
83
+ badge?: never;
84
+ badgePosition?: never;
85
+ numericValue?: never;
67
86
  }
87
+ type ExpandableCardProps = ExpandableCardSharedProps & (ExpandableCardDefaultTriggerProps | ExpandableCardCustomTriggerProps);
68
88
  export default ExpandableCardProps;
@@ -1,7 +1,7 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { BodyText } from '../BodyText';
3
3
  const ExpandableCardText = ({ children, ...props }) => {
4
- return (_jsx(BodyText, { size: "lg", ...props, children: children }));
4
+ return (_jsx(BodyText, { size: "md", weight: "semibold", ...props, children: children }));
5
5
  };
6
6
  ExpandableCardText.displayName = 'ExpandableCardText';
7
7
  export default ExpandableCardText;
@@ -1,9 +1,9 @@
1
- declare const ExpandableCardTrigger: import("react").ForwardRefExoticComponent<import("./ExpandableCardTrigger.props").ExpandableCardTriggerProps & {
1
+ declare const ExpandableCardTrigger: import("react").ForwardRefExoticComponent<(((import("./ExpandableCardTrigger.props").default & {
2
2
  states?: {
3
3
  active?: boolean;
4
4
  disabled?: boolean;
5
5
  };
6
- } & Omit<import("react-native").PressableProps, "children"> & {
6
+ }) & Omit<import("react-native").PressableProps, "children">) & {
7
7
  tabIndex?: 0 | -1 | undefined;
8
8
  } & {
9
9
  children?: import("react").ReactNode | (({ hovered, pressed, focused, focusVisible, disabled, }: {
@@ -13,5 +13,5 @@ declare const ExpandableCardTrigger: import("react").ForwardRefExoticComponent<i
13
13
  focusVisible?: boolean | undefined;
14
14
  disabled?: boolean | undefined;
15
15
  }) => import("react").ReactNode);
16
- } & import("react").RefAttributes<unknown>>;
16
+ }) & import("react").RefAttributes<unknown>>;
17
17
  export default ExpandableCardTrigger;
@@ -1,6 +1,22 @@
1
1
  import type { ComponentType, ReactNode } from 'react';
2
2
  import type { PressableProps } from 'react-native';
3
- export interface ExpandableCardTriggerProps extends Omit<PressableProps, 'children'> {
3
+ interface ExpandableCardTriggerSharedProps extends Omit<PressableProps, 'children'> {
4
+ /**
5
+ * Whether the expandable card is expanded
6
+ */
7
+ isExpanded: boolean;
8
+ /**
9
+ * Whether to show the chevron when providing custom children.
10
+ * @default true
11
+ */
12
+ showChevron?: boolean;
13
+ /**
14
+ * Whether the trigger is disabled
15
+ */
16
+ disabled?: boolean;
17
+ children?: ReactNode;
18
+ }
19
+ interface ExpandableCardTriggerDefaultContentProps {
4
20
  /**
5
21
  * The main heading text
6
22
  */
@@ -31,13 +47,22 @@ export interface ExpandableCardTriggerProps extends Omit<PressableProps, 'childr
31
47
  */
32
48
  numericValue?: string | number;
33
49
  /**
34
- * Whether the expandable card is expanded
50
+ * Custom trigger content that replaces the default trigger layout.
35
51
  */
36
- isExpanded: boolean;
52
+ triggerContent?: never;
53
+ }
54
+ interface ExpandableCardTriggerCustomContentProps {
37
55
  /**
38
- * Whether the trigger is disabled
56
+ * Custom trigger content that replaces the default trigger layout.
39
57
  */
40
- disabled?: boolean;
41
- children?: ReactNode;
58
+ triggerContent: ReactNode;
59
+ heading?: never;
60
+ helperText?: never;
61
+ leadingIcon?: never;
62
+ leadingContent?: never;
63
+ badge?: never;
64
+ badgePosition?: never;
65
+ numericValue?: never;
42
66
  }
67
+ type ExpandableCardTriggerProps = ExpandableCardTriggerSharedProps & (ExpandableCardTriggerDefaultContentProps | ExpandableCardTriggerCustomContentProps);
43
68
  export default ExpandableCardTriggerProps;
@@ -1,6 +1,6 @@
1
1
  import type ExpandableCardTriggerProps from './ExpandableCardTrigger.props';
2
2
  declare const ExpandableCardTriggerRoot: {
3
- ({ heading, helperText, leadingIcon, leadingContent, badge, badgePosition, numericValue, isExpanded, disabled, states, children, ...props }: ExpandableCardTriggerProps & {
3
+ ({ heading, helperText, leadingIcon, leadingContent, badge, badgePosition, numericValue, triggerContent, isExpanded, showChevron, disabled, states, children, ...props }: ExpandableCardTriggerProps & {
4
4
  states?: {
5
5
  active?: boolean;
6
6
  disabled?: boolean;