@jobber/components-native 0.101.6 → 0.101.8
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/dist/docs/Icon/Icon.md +1 -0
- package/dist/docs/InputDate/InputDate.md +1 -4
- package/dist/docs/InputPressable/InputPressable.md +1 -1
- package/dist/docs/Select/Select.md +22 -16
- package/dist/docs/usage-guidelines/usage-guidelines.md +9 -14
- package/dist/package.json +4 -4
- package/dist/tsconfig.build.json +8 -2
- package/dist/tsconfig.build.tsbuildinfo +1 -1
- package/dist/tsconfig.json +1 -0
- package/dist/types/src/ContentOverlay/BottomSheetKeyboardAwareScrollView.d.ts +1 -2
- package/package.json +4 -4
- package/src/ActionItem/ActionItem.stories.tsx +16 -95
- package/src/ActionItem/ActionItemGroup.stories.tsx +7 -84
- package/src/ActionItem/docs/ActionItemActionAlignmentExample.tsx +23 -0
- package/src/ActionItem/docs/ActionItemBasicExample.tsx +12 -0
- package/src/ActionItem/docs/ActionItemGroupBasicExample.tsx +39 -0
- package/src/ActionItem/docs/ActionItemGroupMixedComponentsExample.tsx +52 -0
- package/src/ActionItem/docs/ActionItemInACardExample.tsx +27 -0
- package/src/ActionItem/docs/ActionItemInteractiveChildrenExample.tsx +30 -0
- package/src/ActionItem/docs/ActionItemMixedComponentsExample.tsx +36 -0
- package/src/ActionItem/docs/ActionItemNoActionExample.tsx +15 -0
- package/src/ActionItem/docs/ActionItemTitleOnlyExample.tsx +18 -0
- package/src/ActionItem/docs/index.ts +9 -0
- package/src/ActionLabel/ActionLabel.stories.tsx +10 -11
- package/src/ActionLabel/docs/ActionLabelBasicExample.tsx +15 -0
- package/src/ActionLabel/docs/ActionLabelColorExample.tsx +15 -0
- package/src/ActionLabel/docs/ActionLabelDarkBackgroundExample.tsx +25 -0
- package/src/ActionLabel/docs/ActionLabelDisabledExample.tsx +15 -0
- package/src/ActionLabel/docs/index.ts +4 -0
- package/src/ActivityIndicator/ActivityIndicator.stories.tsx +3 -18
- package/src/ActivityIndicator/docs/ActivityIndicatorBasicExample.tsx +22 -0
- package/src/ActivityIndicator/docs/index.ts +1 -0
- package/src/AtlantisThemeContext/AtlantisThemeContext.stories.tsx +7 -70
- package/src/AtlantisThemeContext/docs/AtlantisThemeContextBasicExample.tsx +41 -0
- package/src/AtlantisThemeContext/docs/AtlantisThemeContextForceThemeForProviderExample.tsx +56 -0
- package/src/AtlantisThemeContext/docs/index.ts +2 -0
- package/src/AutoLink/AutoLink.stories.tsx +3 -0
- package/src/AutoLink/docs/AutoLinkBasicExample.tsx +14 -0
- package/src/AutoLink/docs/AutoLinkSkipPhoneNumberExample.tsx +14 -0
- package/src/AutoLink/docs/index.ts +2 -0
- package/src/Banner/Banner.stories.tsx +11 -45
- package/src/Banner/docs/BannerActionsInBannersExample.tsx +18 -0
- package/src/Banner/docs/BannerBasicExample.tsx +21 -0
- package/src/Banner/docs/BannerErrorDetailsExample.tsx +19 -0
- package/src/Banner/docs/BannerErrorExample.tsx +13 -0
- package/src/Banner/docs/index.ts +4 -0
- package/src/BottomSheet/BottomSheet.stories.tsx +6 -111
- package/src/BottomSheet/docs/BottomSheetBasicExample.tsx +63 -0
- package/src/BottomSheet/docs/BottomSheetHeaderFooterExample.tsx +65 -0
- package/src/BottomSheet/docs/index.ts +2 -0
- package/src/Button/Button.stories.tsx +3 -5
- package/src/Button/docs/ButtonBasicExample.tsx +14 -0
- package/src/Button/docs/ButtonCancelExample.tsx +15 -0
- package/src/Button/docs/index.ts +2 -0
- package/src/ButtonGroup/ButtonGroup.stories.tsx +9 -64
- package/src/ButtonGroup/docs/ButtonGroupBasicExample.tsx +34 -0
- package/src/ButtonGroup/docs/ButtonGroupPrimaryExample.tsx +37 -0
- package/src/ButtonGroup/docs/ButtonGroupSecondaryExample.tsx +35 -0
- package/src/ButtonGroup/docs/index.ts +3 -0
- package/src/Card/Card.stories.tsx +9 -43
- package/src/Card/docs/CardBasicExample.tsx +20 -0
- package/src/Card/docs/CardElevationExample.tsx +30 -0
- package/src/Card/docs/CardPressableExample.tsx +34 -0
- package/src/Card/docs/index.ts +3 -0
- package/src/Checkbox/Checkbox.stories.tsx +16 -56
- package/src/Checkbox/docs/CheckboxBasicExample.tsx +9 -0
- package/src/Checkbox/docs/CheckboxControlledExample.tsx +18 -0
- package/src/Checkbox/docs/CheckboxGroupBasicExample.tsx +15 -0
- package/src/Checkbox/docs/CheckboxGroupControlledExample.tsx +32 -0
- package/src/Checkbox/docs/CheckboxGroupLabelledExample.tsx +15 -0
- package/src/Checkbox/docs/index.ts +5 -0
- package/src/Chip/Chip.stories.tsx +11 -62
- package/src/Chip/docs/ChipAccentExample.tsx +62 -0
- package/src/Chip/docs/ChipBasicExample.tsx +19 -0
- package/src/Chip/docs/ChipDismissableExample.tsx +23 -0
- package/src/Chip/docs/ChipInactiveBackgroundColorExample.tsx +23 -0
- package/src/Chip/docs/index.ts +4 -0
- package/src/Content/Content.stories.tsx +4 -19
- package/src/Content/docs/ContentHorizontal.tsx +22 -0
- package/src/Content/docs/ContentVertical.tsx +22 -0
- package/src/Content/docs/index.ts +2 -0
- package/src/ContentOverlay/ContentOverlay.stories.tsx +6 -52
- package/src/ContentOverlay/docs/ContentOverlayBasic.tsx +54 -0
- package/src/ContentOverlay/docs/index.ts +1 -0
- package/src/Disclosure/Disclosure.stories.tsx +4 -20
- package/src/Disclosure/docs/DisclosureBasic.tsx +23 -0
- package/src/Disclosure/docs/index.ts +1 -0
- package/src/Divider/Divider.stories.tsx +6 -50
- package/src/Divider/docs/DividerHorizontal.tsx +21 -0
- package/src/Divider/docs/DividerVertical.tsx +39 -0
- package/src/Divider/docs/index.ts +2 -0
- package/src/EmptyState/EmptyState.stories.tsx +2 -0
- package/src/EmptyState/docs/EmptyStateBasic.tsx +27 -0
- package/src/EmptyState/docs/index.ts +1 -0
- package/src/Flex/Flex.stories.tsx +6 -57
- package/src/Flex/docs/FlexMultiRow.tsx +25 -0
- package/src/Flex/docs/FlexNested.tsx +22 -0
- package/src/Flex/docs/index.ts +2 -0
- package/src/Form/Form.stories.tsx +6 -50
- package/src/Form/docs/FormBasic.tsx +63 -0
- package/src/Form/docs/index.ts +1 -0
- package/src/FormField/FormField.stories.tsx +4 -46
- package/src/FormField/docs/FormFieldBasic.tsx +15 -0
- package/src/FormField/docs/FormFieldWithValidations.tsx +38 -0
- package/src/FormField/docs/index.ts +2 -0
- package/src/FormatFile/FormatFile.stories.tsx +8 -36
- package/src/FormatFile/docs/FormatFileBasic.tsx +25 -0
- package/src/FormatFile/docs/index.ts +1 -0
- package/src/Glimmer/Glimmer.stories.tsx +6 -31
- package/src/Glimmer/docs/GlimmerBasic.tsx +9 -0
- package/src/Glimmer/docs/GlimmerInDepth.tsx +32 -0
- package/src/Glimmer/docs/index.ts +2 -0
- package/src/Heading/Heading.stories.tsx +5 -18
- package/src/Heading/docs/HeadingLevels.tsx +21 -0
- package/src/Heading/docs/index.ts +1 -0
- package/src/Icon/Icon.stories.tsx +4 -7
- package/src/Icon/docs/IconBasic.tsx +7 -0
- package/src/Icon/docs/index.ts +1 -0
- package/src/IconButton/IconButton.stories.tsx +2 -0
- package/src/IconButton/docs/IconButtonBasic.tsx +17 -0
- package/src/IconButton/docs/index.ts +1 -0
- package/src/InputCurrency/InputCurrency.stories.tsx +2 -0
- package/src/InputCurrency/docs/InputCurrencyBasic.tsx +9 -0
- package/src/InputCurrency/docs/index.ts +1 -0
- package/src/InputDate/InputDate.stories.tsx +10 -11
- package/src/InputDate/docs/InputDateBasic.tsx +9 -0
- package/src/InputDate/docs/InputDateEmptyValueLabel.tsx +17 -0
- package/src/InputDate/docs/InputDateInvalid.tsx +17 -0
- package/src/InputDate/docs/index.ts +3 -0
- package/src/InputEmail/InputEmail.stories.tsx +4 -7
- package/src/InputEmail/docs/InputEmailBasic.tsx +9 -0
- package/src/InputEmail/docs/index.ts +1 -0
- package/src/InputFieldWrapper/InputFieldWrapper.stories.tsx +15 -23
- package/src/InputFieldWrapper/docs/InputFieldWrapperBasic.tsx +15 -0
- package/src/InputFieldWrapper/docs/InputFieldWrapperClearable.tsx +24 -0
- package/src/InputFieldWrapper/docs/InputFieldWrapperDisabled.tsx +18 -0
- package/src/InputFieldWrapper/docs/InputFieldWrapperInvalid.tsx +18 -0
- package/src/InputFieldWrapper/docs/InputFieldWrapperPrefixAndSuffix.tsx +18 -0
- package/src/InputFieldWrapper/docs/index.ts +5 -0
- package/src/InputNumber/InputNumber.stories.tsx +5 -6
- package/src/InputNumber/docs/InputNumberBasic.tsx +7 -0
- package/src/InputNumber/docs/InputNumberInvalid.tsx +15 -0
- package/src/InputNumber/docs/index.ts +2 -0
- package/src/InputPassword/InputPassword.stories.tsx +4 -5
- package/src/InputPassword/docs/InputPasswordBasic.tsx +9 -0
- package/src/InputPassword/docs/index.ts +1 -0
- package/src/InputPressable/InputPressable.stories.tsx +14 -20
- package/src/InputPressable/docs/InputPressableBasic.tsx +17 -0
- package/src/InputPressable/docs/InputPressableClearable.tsx +23 -0
- package/src/InputPressable/docs/InputPressableClickableSuffix.tsx +14 -0
- package/src/InputPressable/docs/InputPressableDisabled.tsx +16 -0
- package/src/InputPressable/docs/InputPressableInvalid.tsx +16 -0
- package/src/InputPressable/docs/InputPressablePrefixOrSuffix.tsx +20 -0
- package/src/InputPressable/docs/index.ts +6 -0
- package/src/InputSearch/InputSearch.stories.tsx +4 -18
- package/src/InputSearch/docs/InputSearchBasic.tsx +20 -0
- package/src/InputSearch/docs/index.ts +1 -0
- package/src/InputText/InputText.stories.tsx +7 -29
- package/src/InputText/docs/InputTextBasic.tsx +7 -0
- package/src/InputText/docs/InputTextInvalid.tsx +14 -0
- package/src/InputText/docs/InputTextToolbar.tsx +31 -0
- package/src/InputText/docs/index.ts +3 -0
- package/src/InputTime/InputTime.stories.tsx +10 -72
- package/src/InputTime/docs/InputTimeBasic.tsx +29 -0
- package/src/InputTime/docs/InputTimeEmptyValue.tsx +27 -0
- package/src/InputTime/docs/InputTimeFormControlled.tsx +46 -0
- package/src/InputTime/docs/index.ts +3 -0
- package/src/ProgressBar/ProgressBar.stories.tsx +6 -46
- package/src/ProgressBar/docs/ProgressBarBasic.tsx +22 -0
- package/src/ProgressBar/docs/ProgressBarWithHeader.tsx +45 -0
- package/src/ProgressBar/docs/index.ts +2 -0
- package/src/Select/Select.stories.tsx +6 -18
- package/src/Select/docs/SelectBasic.tsx +14 -0
- package/src/Select/docs/SelectInitialValue.tsx +18 -0
- package/src/Select/docs/index.ts +2 -0
- package/src/StatusLabel/StatusLabel.stories.tsx +2 -0
- package/src/StatusLabel/docs/StatusLabelBasic.tsx +9 -0
- package/src/StatusLabel/docs/index.ts +1 -0
- package/src/Switch/Switch.stories.tsx +6 -18
- package/src/Switch/docs/SwitchBasic.tsx +9 -0
- package/src/Switch/docs/SwitchControlled.tsx +21 -0
- package/src/Switch/docs/index.ts +2 -0
- package/src/Text/Text.stories.tsx +14 -33
- package/src/Text/docs/TextBasic.tsx +17 -0
- package/src/Text/docs/TextMultiLevelNesting.tsx +14 -0
- package/src/Text/docs/TextNestedBold.tsx +10 -0
- package/src/Text/docs/TextNestedMixedStyles.tsx +11 -0
- package/src/Text/docs/index.ts +4 -0
- package/src/TextList/TextList.stories.tsx +12 -0
- package/src/TextList/docs/TextListBasic.tsx +9 -0
- package/src/TextList/docs/TextListChildSpacing.tsx +19 -0
- package/src/TextList/docs/TextListEmphasis.tsx +19 -0
- package/src/TextList/docs/TextListLevels.tsx +19 -0
- package/src/TextList/docs/TextListSpacing.tsx +19 -0
- package/src/TextList/docs/index.ts +5 -0
- package/src/ThumbnailList/ThumbnailList.stories.tsx +3 -61
- package/src/ThumbnailList/docs/ThumbnailListBasic.tsx +62 -0
- package/src/ThumbnailList/docs/index.ts +1 -0
- package/src/Toast/Toast.stories.tsx +10 -21
- package/src/Toast/docs/ToastBasic.tsx +23 -0
- package/src/Toast/docs/index.ts +1 -0
- package/src/Typography/Typography.stories.tsx +5 -11
- package/src/Typography/docs/TypographyBasic.tsx +9 -0
- package/src/Typography/docs/index.ts +1 -0
package/dist/docs/Icon/Icon.md
CHANGED
|
@@ -19,10 +19,8 @@ date.
|
|
|
19
19
|
```tsx
|
|
20
20
|
import React from "react";
|
|
21
21
|
import { InputDate } from "@jobber/components/InputDate";
|
|
22
|
-
|
|
23
|
-
import type { InputDateProps } from "../InputDate.types";
|
|
22
|
+
import type { InputDateProps } from "@jobber/components/InputDate";
|
|
24
23
|
|
|
25
|
-
// eslint-disable-next-line import/no-deprecated
|
|
26
24
|
export function InputDateDisabledExample(props: InputDateProps) {
|
|
27
25
|
return <InputDate placeholder="Start Date" disabled={true} {...props} />;
|
|
28
26
|
}
|
|
@@ -42,7 +40,6 @@ export function InputDateInvalidExample(props: InputDateProps) {
|
|
|
42
40
|
error="Start Date is required"
|
|
43
41
|
invalid={true}
|
|
44
42
|
{...props}
|
|
45
|
-
version={2}
|
|
46
43
|
/>
|
|
47
44
|
);
|
|
48
45
|
}
|
|
@@ -60,5 +60,5 @@ To prevent a previously focused input from being focused again when the
|
|
|
60
60
|
| `prefix` | `{ icon?: IconNames; label?: string; }` | No | — | Symbol to display before the text input |
|
|
61
61
|
| `ref` | `Ref<Text>` | No | — | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (... |
|
|
62
62
|
| `showMiniLabel` | `boolean` | No | `true` | Controls the visibility of the mini label that appears inside the input when a value is entered. By default, the plac... |
|
|
63
|
-
| `suffix` | `
|
|
63
|
+
| `suffix` | `{ icon: IconNames; label?: string; onPress: () => void; } | { onPress?: never; icon?: IconNames; label?: string; }` | No | — | Symbol to display after the text input |
|
|
64
64
|
| `value` | `string` | No | — | Current value of the component |
|
|
@@ -9,9 +9,9 @@ selected. For grouping options with section headers, use Select.OptionGroup.
|
|
|
9
9
|
|
|
10
10
|
#### Custom grouped menu and browser support
|
|
11
11
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
12
|
+
To enable the enhanced grouped menu styling (bold section headers, edge‑to‑edge
|
|
13
|
+
dividers and hover backgrounds), set the `UNSAFE_experimentalStyles` prop on
|
|
14
|
+
`Select`.
|
|
15
15
|
|
|
16
16
|
* When `UNSAFE_experimentalStyles` is true and the browser supports
|
|
17
17
|
`appearance: base-select` (Chromium 123+), the select renders with the
|
|
@@ -20,21 +20,19 @@ the `UNSAFE_experimentalStyles` prop on `Select`.
|
|
|
20
20
|
the select remains native while still rendering the same `OptionGroup`
|
|
21
21
|
structure.
|
|
22
22
|
|
|
23
|
-
#### Option Props
|
|
24
|
-
|
|
25
|
-
#### OptionGroup Props
|
|
26
|
-
|
|
27
23
|
## States
|
|
28
24
|
|
|
29
25
|
### Invalid
|
|
30
26
|
|
|
31
27
|
```tsx
|
|
32
|
-
import React from "react";
|
|
28
|
+
import React, { useState } from "react";
|
|
33
29
|
import { Option, Select } from "@jobber/components/Select";
|
|
34
30
|
|
|
35
31
|
export function SelectInvalidExample() {
|
|
32
|
+
const [value, setValue] = useState<string | number | undefined>("");
|
|
33
|
+
|
|
36
34
|
return (
|
|
37
|
-
<Select invalid={true}>
|
|
35
|
+
<Select invalid={true} value={value} onChange={setValue}>
|
|
38
36
|
<Option value="sad">Tony</Option>
|
|
39
37
|
<Option value="old">Steve</Option>
|
|
40
38
|
</Select>
|
|
@@ -45,12 +43,14 @@ export function SelectInvalidExample() {
|
|
|
45
43
|
### Disabled
|
|
46
44
|
|
|
47
45
|
```tsx
|
|
48
|
-
import React from "react";
|
|
46
|
+
import React, { useState } from "react";
|
|
49
47
|
import { Option, Select } from "@jobber/components/Select";
|
|
50
48
|
|
|
51
49
|
export function SelectDisabledExample() {
|
|
50
|
+
const [value, setValue] = useState<string | number | undefined>("");
|
|
51
|
+
|
|
52
52
|
return (
|
|
53
|
-
<Select disabled={true}>
|
|
53
|
+
<Select disabled={true} value={value} onChange={setValue}>
|
|
54
54
|
<Option value="sad">Tony</Option>
|
|
55
55
|
<Option value="old">Steve</Option>
|
|
56
56
|
</Select>
|
|
@@ -67,15 +67,18 @@ provides the section header text.
|
|
|
67
67
|
### Basic Option Groups
|
|
68
68
|
|
|
69
69
|
```tsx
|
|
70
|
-
import React from "react";
|
|
70
|
+
import React, { useState } from "react";
|
|
71
71
|
import { Select } from "@jobber/components/Select";
|
|
72
72
|
|
|
73
73
|
export function SelectCustomOptionGroupsExample() {
|
|
74
|
+
const [value, setValue] = useState<string | number | undefined>("");
|
|
75
|
+
|
|
74
76
|
return (
|
|
75
77
|
<Select
|
|
76
78
|
placeholder="Select an option"
|
|
77
|
-
version={2}
|
|
78
79
|
UNSAFE_experimentalStyles={true}
|
|
80
|
+
value={value}
|
|
81
|
+
onChange={setValue}
|
|
79
82
|
>
|
|
80
83
|
<Select.OptionGroup label="Team A">
|
|
81
84
|
<Select.Option value="alice">Alice</Select.Option>
|
|
@@ -100,15 +103,18 @@ export function SelectCustomOptionGroupsExample() {
|
|
|
100
103
|
### Disabled Option Groups
|
|
101
104
|
|
|
102
105
|
```tsx
|
|
103
|
-
import React from "react";
|
|
106
|
+
import React, { useState } from "react";
|
|
104
107
|
import { Select } from "@jobber/components/Select";
|
|
105
108
|
|
|
106
109
|
export function SelectCustomOptionGroupDisabledExample() {
|
|
110
|
+
const [value, setValue] = useState<string | number | undefined>("");
|
|
111
|
+
|
|
107
112
|
return (
|
|
108
113
|
<Select
|
|
109
|
-
version={2}
|
|
110
114
|
UNSAFE_experimentalStyles
|
|
111
115
|
placeholder="Select an option"
|
|
116
|
+
value={value}
|
|
117
|
+
onChange={setValue}
|
|
112
118
|
>
|
|
113
119
|
<Select.OptionGroup label="Available Items">
|
|
114
120
|
<Select.Option value="option1">Option 1</Select.Option>
|
|
@@ -132,7 +138,7 @@ export function SelectCustomOptionGroupDisabledExample() {
|
|
|
132
138
|
|
|
133
139
|
### Custom (Chromium) vs native
|
|
134
140
|
|
|
135
|
-
Select
|
|
141
|
+
Select is native by default. Opt into the customizable Chrome UI with
|
|
136
142
|
`UNSAFE_experimentalStyles`. This enhances grouped menus in Chromium 123+ when
|
|
137
143
|
the browser supports `appearance: base-select`.
|
|
138
144
|
|
|
@@ -11,18 +11,15 @@ The following components have a v2 implementation. **Always pass
|
|
|
11
11
|
`version={2}`**. Never generate v1 usage for these components — v1 is
|
|
12
12
|
deprecated.
|
|
13
13
|
|
|
14
|
-
| Component | Import | v2 prop
|
|
15
|
-
| ---------------- | ------------------------------------------------------------------------ |
|
|
16
|
-
| Autocomplete | `import { Autocomplete } from "@jobber/components/Autocomplete"` | `version={2}` — fully controlled, async support
|
|
17
|
-
|
|
|
18
|
-
|
|
|
19
|
-
|
|
|
20
|
-
|
|
|
21
|
-
|
|
|
22
|
-
|
|
|
23
|
-
| InputTime | `import { InputTime } from "@jobber/components/InputTime"` | `version={2}` |
|
|
24
|
-
| Modal | `import { Modal } from "@jobber/components/Modal"` | `version={2}` — uses `Modal.Provider` composition |
|
|
25
|
-
| Select | `import { Select } from "@jobber/components/Select"` | `version={2}` — native `<select>`; opt into the customizable Chromium UI with `UNSAFE_experimentalStyles` |
|
|
14
|
+
| Component | Import | v2 prop |
|
|
15
|
+
| ---------------- | ------------------------------------------------------------------------ | ------------------------------------------------- |
|
|
16
|
+
| Autocomplete | `import { Autocomplete } from "@jobber/components/Autocomplete"` | `version={2}` — fully controlled, async support |
|
|
17
|
+
| InputEmail | `import { InputEmail } from "@jobber/components/InputEmail"` | `version={2}` |
|
|
18
|
+
| InputNumber | `import { InputNumber } from "@jobber/components/InputNumber"` | `version={2}` |
|
|
19
|
+
| InputPhoneNumber | `import { InputPhoneNumber } from "@jobber/components/InputPhoneNumber"` | `version={2}` |
|
|
20
|
+
| InputText | `import { InputText } from "@jobber/components/InputText"` | `version={2}` |
|
|
21
|
+
| InputTime | `import { InputTime } from "@jobber/components/InputTime"` | `version={2}` |
|
|
22
|
+
| Modal | `import { Modal } from "@jobber/components/Modal"` | `version={2}` — uses `Modal.Provider` composition |
|
|
26
23
|
|
|
27
24
|
## Deprecated components — do not use
|
|
28
25
|
|
|
@@ -40,7 +37,6 @@ deprecated.
|
|
|
40
37
|
| `Card` | `title` | Use the `header` prop, or compose with `Card.Header` and `Card.Body`. |
|
|
41
38
|
| `Toast` | `action`, `actionLabel` | Both will be removed in the next major version. Trigger follow-up work from outside the toast. |
|
|
42
39
|
| Text inputs (`InputText` v2 etc.) | `onEnter` | Use `onKeyDown` or `onKeyUp` and check the key. |
|
|
43
|
-
| `Select` v2 | `onEnter` | Use `onKeyDown` or `onKeyUp`. |
|
|
44
40
|
| `FormField` (`maxLength` on v1 inputs) | `maxLength` | Flagged in source as flawed; only kept for v1 backwards compatibility. |
|
|
45
41
|
|
|
46
42
|
## Import pattern
|
|
@@ -119,7 +115,6 @@ parent reads its compound children to wire up state, accessibility, and styling.
|
|
|
119
115
|
| `Banner` | `Banner.Provider`, `Banner.Content`, `Banner.Icon`, `Banner.DismissButton`, `Banner.Action` | Either the simple `<Banner type="...">children</Banner>` form, or the Provider form: `Banner.Provider` > `Banner.Content` (+ optional `Banner.Icon` / `Banner.Action` / `Banner.DismissButton`). |
|
|
120
116
|
| `Card` | `Card.Header`, `Card.Body` | `Card` > `Card.Header` + `Card.Body`. The legacy `header` string/element prop still works for simple cases. Use composition for any header that needs richer markup. |
|
|
121
117
|
| `Combobox` | `Combobox.Activator`, `Combobox.Option`, `Combobox.Action` | `Combobox` > optional `Combobox.Activator`, one or more `Combobox.Option`, optional `Combobox.Action`. Omitting `Combobox.Activator` renders the default activator. |
|
|
122
|
-
| `Select` v2 | `Select.Option`, `Select.OptionGroup` | These map directly to native `<option>` and `<optgroup>`. Use `UNSAFE_experimentalStyles` to opt into the customizable Chromium UI for grouped menus. |
|
|
123
118
|
| `DataTable` | `DataTable.Container`, `DataTable.Table`, `DataTable.Header`, `DataTable.HeaderCell`, `DataTable.SortableHeader`, `DataTable.Body`, `DataTable.Row`, `DataTable.Cell`, `DataTable.RowActions`, `DataTable.Actions`, `DataTable.Footer`, `DataTable.Pagination`, `DataTable.PaginationButton` | `DataTable.Footer` is a sibling of `DataTable.Body`, not a child. Place pagination outside the table (not inside the footer). For `layout="fixed"`, pass explicit widths via `style={{ width: "..." }}` on each `HeaderCell`. |
|
|
124
119
|
| `Menu` (web composable) | `Menu.Trigger`, `Menu.Content`, `Menu.Section`, `Menu.Header`, `Menu.HeaderLabel`, `Menu.Item`, `Menu.ItemIcon`, `Menu.ItemLabel`, `Menu.Separator` | `Menu` > `Menu.Trigger` + `Menu.Content` containing `Menu.Item`s (optionally grouped in `Menu.Section`s). Each `Menu.Item` must include `textValue` for type-ahead and screen readers. |
|
|
125
120
|
| `Page` | `Page.Header`, `Page.HeaderContent`, `Page.TitleBar`, `Page.Title`, `Page.Subtitle`, `Page.Intro`, `Page.Actions`, `Page.ActionPrimary`, `Page.ActionSecondary`, `Page.ActionMenu`, `Page.PrimaryButton`, `Page.SecondaryButton`, `Page.Menu`, `Page.Body` | Composable `Page` API: `Page` > `Page.Header` (containing `Page.HeaderContent` with `Page.TitleBar` > `Page.Title` / `Page.Subtitle`, and `Page.Actions` with `Page.ActionPrimary` / `Page.ActionSecondary` / `Page.ActionMenu`) + `Page.Body`. The legacy props-based API (`title`, `subtitle`, `intro`, etc.) still works. |
|
package/dist/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jobber/components-native",
|
|
3
|
-
"version": "0.101.
|
|
3
|
+
"version": "0.101.8",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "React Native implementation of Atlantis",
|
|
6
6
|
"repository": {
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
"./jestSetup.js"
|
|
30
30
|
],
|
|
31
31
|
"scripts": {
|
|
32
|
-
"clean": "rm -rf dist/* tsconfig.tsbuildinfo",
|
|
32
|
+
"clean": "rm -rf dist/* tsconfig.build.tsbuildinfo",
|
|
33
33
|
"build": "pnpm run build:clean && pnpm run compile && pnpm run build:llm-docs:bundle",
|
|
34
34
|
"build:llm-docs:bundle": "pnpm run build:llm-docs:clean && pnpm run build:llm-docs:mobile",
|
|
35
35
|
"build:llm-docs:mobile": "pnpm run --filter @jobber/atlantis-site generate:llm-docs -- --platform mobile --out ../components-native/dist/docs",
|
|
@@ -58,7 +58,7 @@
|
|
|
58
58
|
"devDependencies": {
|
|
59
59
|
"@babel/runtime": "^7.29.2",
|
|
60
60
|
"@gorhom/bottom-sheet": "^5.2.8",
|
|
61
|
-
"@jobber/design": "0.
|
|
61
|
+
"@jobber/design": "0.99.0",
|
|
62
62
|
"@jobber/hooks": "2.19.4",
|
|
63
63
|
"@react-native-community/datetimepicker": "^8.4.5",
|
|
64
64
|
"@react-native/babel-preset": "^0.82.1",
|
|
@@ -109,5 +109,5 @@
|
|
|
109
109
|
"react-native-screens": ">=4.18.0",
|
|
110
110
|
"react-native-svg": ">=12.0.0"
|
|
111
111
|
},
|
|
112
|
-
"gitHead": "
|
|
112
|
+
"gitHead": "6290db9d722109c8a82f97a2d0f6159beeb4ff01"
|
|
113
113
|
}
|
package/dist/tsconfig.build.json
CHANGED
|
@@ -1,11 +1,17 @@
|
|
|
1
1
|
{
|
|
2
2
|
"extends": "./tsconfig.json",
|
|
3
3
|
"compilerOptions": {
|
|
4
|
+
"moduleResolution": "bundler",
|
|
4
5
|
// Exclude "@jobber/hooks" from paths to avoid building hooks from src
|
|
5
|
-
"paths": {
|
|
6
|
+
"paths": {
|
|
7
|
+
"@jobber/components-native": [
|
|
8
|
+
"./src/index.ts"
|
|
9
|
+
]
|
|
10
|
+
}
|
|
6
11
|
},
|
|
7
12
|
"exclude": [
|
|
8
13
|
"*.test.*",
|
|
9
|
-
"**/*.stories.tsx"
|
|
14
|
+
"**/*.stories.tsx",
|
|
15
|
+
"src/**/docs"
|
|
10
16
|
]
|
|
11
17
|
}
|