@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.
- package/.turbo/turbo-build.log +4 -5
- package/.turbo/turbo-lint.log +62 -70
- package/CHANGELOG.md +155 -0
- package/build/components/Badge/Badge.js +2 -2
- package/build/components/Badge/Badge.props.d.ts +1 -0
- package/build/components/Badge/BadgeText.d.ts +1 -1
- package/build/components/Badge/BadgeText.js +2 -2
- package/build/components/Container/Container.props.d.ts +2 -2
- package/build/components/ExpandableCard/ExpandableCard.d.ts +1 -1
- package/build/components/ExpandableCard/ExpandableCard.js +13 -2
- package/build/components/ExpandableCard/ExpandableCard.props.d.ts +43 -23
- package/build/components/ExpandableCard/ExpandableCardText.js +1 -1
- package/build/components/ExpandableCard/ExpandableCardTrigger.d.ts +3 -3
- package/build/components/ExpandableCard/ExpandableCardTrigger.props.d.ts +31 -6
- package/build/components/ExpandableCard/ExpandableCardTriggerRoot.d.ts +1 -1
- package/build/components/ExpandableCard/ExpandableCardTriggerRoot.js +13 -2
- package/build/components/Flex/Flex.props.d.ts +2 -2
- package/build/components/FormField/FormField.d.ts +5 -5
- package/build/components/FormField/FormField.js +3 -2
- package/build/components/Modal/Modal.d.ts +1 -1
- package/build/components/Modal/Modal.js +33 -39
- package/build/components/Modal/Modal.props.d.ts +8 -3
- package/build/components/Modal/Modal.shared.types.d.ts +19 -4
- package/build/components/Modal/Modal.web.d.ts +1 -1
- package/build/components/Modal/Modal.web.js +6 -3
- package/build/components/NavModal/NavModal.d.ts +1 -1
- package/build/components/NavModal/NavModal.js +10 -7
- package/build/components/NavModal/NavModal.props.d.ts +4 -3
- package/build/components/Textarea/Textarea.d.ts +1 -1
- package/build/components/Textarea/Textarea.js +64 -5
- package/build/components/Textarea/Textarea.props.d.ts +10 -0
- package/build/components/Textarea/TextareaRoot.js +4 -1
- package/docs/changelog.mdx +21 -0
- package/package.json +4 -4
- package/src/components/Badge/Badge.props.ts +1 -0
- package/src/components/Badge/Badge.tsx +6 -1
- package/src/components/Badge/BadgeText.tsx +8 -2
- package/src/components/Container/Container.props.ts +10 -1
- package/src/components/ExpandableCard/ExpandableCard.docs.mdx +89 -37
- package/src/components/ExpandableCard/ExpandableCard.props.ts +51 -27
- package/src/components/ExpandableCard/ExpandableCard.stories.tsx +67 -17
- package/src/components/ExpandableCard/ExpandableCard.tsx +15 -7
- package/src/components/ExpandableCard/ExpandableCardText.tsx +1 -1
- package/src/components/ExpandableCard/ExpandableCardTrigger.props.ts +37 -7
- package/src/components/ExpandableCard/ExpandableCardTriggerRoot.tsx +36 -2
- package/src/components/Flex/Flex.props.ts +16 -2
- package/src/components/FormField/FormField.tsx +2 -1
- package/src/components/List/List.stories.tsx +35 -0
- package/src/components/Modal/Modal.docs.mdx +52 -1
- package/src/components/Modal/Modal.props.ts +21 -6
- package/src/components/Modal/Modal.shared.types.ts +23 -4
- package/src/components/Modal/Modal.stories.tsx +165 -1
- package/src/components/Modal/Modal.tsx +101 -81
- package/src/components/Modal/Modal.web.tsx +29 -23
- package/src/components/NavModal/NavModal.docs.mdx +29 -0
- package/src/components/NavModal/NavModal.props.ts +11 -3
- package/src/components/NavModal/NavModal.stories.tsx +29 -0
- package/src/components/NavModal/NavModal.tsx +39 -33
- package/src/components/Textarea/Textarea.docs.mdx +33 -1
- package/src/components/Textarea/Textarea.props.ts +11 -2
- package/src/components/Textarea/Textarea.stories.tsx +21 -1
- package/src/components/Textarea/Textarea.tsx +107 -3
- package/src/components/Textarea/TextareaRoot.tsx +6 -2
- package/build/components/DatePicker/TimePicker.d.ts +0 -3
- package/build/components/DatePicker/TimePicker.js +0 -84
- package/build/components/DatePicker/time-picker/animated-math.d.ts +0 -4
- package/build/components/DatePicker/time-picker/animated-math.js +0 -19
- package/build/components/DatePicker/time-picker/period-native.d.ts +0 -6
- package/build/components/DatePicker/time-picker/period-native.js +0 -17
- package/build/components/DatePicker/time-picker/period-picker.d.ts +0 -6
- package/build/components/DatePicker/time-picker/period-picker.js +0 -10
- package/build/components/DatePicker/time-picker/period-web.d.ts +0 -6
- package/build/components/DatePicker/time-picker/period-web.js +0 -21
- package/build/components/DatePicker/time-picker/wheel-native.d.ts +0 -8
- package/build/components/DatePicker/time-picker/wheel-native.js +0 -19
- package/build/components/DatePicker/time-picker/wheel-picker/index.d.ts +0 -2
- package/build/components/DatePicker/time-picker/wheel-picker/index.js +0 -2
- package/build/components/DatePicker/time-picker/wheel-picker/wheel-picker-item.d.ts +0 -16
- package/build/components/DatePicker/time-picker/wheel-picker/wheel-picker-item.js +0 -97
- package/build/components/DatePicker/time-picker/wheel-picker/wheel-picker.d.ts +0 -21
- package/build/components/DatePicker/time-picker/wheel-picker/wheel-picker.js +0 -88
- package/build/components/DatePicker/time-picker/wheel-picker/wheel-picker.style.d.ts +0 -23
- package/build/components/DatePicker/time-picker/wheel-picker/wheel-picker.style.js +0 -21
- package/build/components/DatePicker/time-picker/wheel-web.d.ts +0 -8
- package/build/components/DatePicker/time-picker/wheel-web.js +0 -146
- package/build/components/DatePicker/time-picker/wheel.d.ts +0 -8
- package/build/components/DatePicker/time-picker/wheel.js +0 -10
- package/build/components/SafeAreaView/SafeAreaView.d.ts +0 -5
- package/build/components/SafeAreaView/SafeAreaView.js +0 -117
- package/build/components/SafeAreaView/SafeAreaView.props.d.ts +0 -17
- package/build/components/SafeAreaView/SafeAreaView.props.js +0 -1
- package/build/components/SafeAreaView/index.d.ts +0 -2
- package/build/components/SafeAreaView/index.js +0 -1
package/.turbo/turbo-build.log
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
>
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
|
|
2
|
+
> @utilitywarehouse/hearth-react-native@0.31.0 build /home/runner/work/hearth/hearth/packages/react-native
|
|
3
|
+
> tsc
|
|
4
|
+
|
package/.turbo/turbo-lint.log
CHANGED
|
@@ -1,70 +1,62 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
>
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
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 => ({
|
|
@@ -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
|
|
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
|
-
|
|
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
|
-
*
|
|
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
|
-
|
|
72
|
+
triggerContent?: never;
|
|
73
|
+
}
|
|
74
|
+
interface ExpandableCardCustomTriggerProps {
|
|
63
75
|
/**
|
|
64
|
-
* Custom
|
|
76
|
+
* Custom trigger content that replaces the default trigger layout.
|
|
65
77
|
*/
|
|
66
|
-
|
|
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: "
|
|
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").
|
|
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
|
-
|
|
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
|
-
*
|
|
50
|
+
* Custom trigger content that replaces the default trigger layout.
|
|
35
51
|
*/
|
|
36
|
-
|
|
52
|
+
triggerContent?: never;
|
|
53
|
+
}
|
|
54
|
+
interface ExpandableCardTriggerCustomContentProps {
|
|
37
55
|
/**
|
|
38
|
-
*
|
|
56
|
+
* Custom trigger content that replaces the default trigger layout.
|
|
39
57
|
*/
|
|
40
|
-
|
|
41
|
-
|
|
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;
|