@hero-design/rn 8.2.1 → 8.2.3

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 (47) hide show
  1. package/.turbo/turbo-build.log +9 -9
  2. package/es/index.js +165 -52
  3. package/lib/index.js +163 -50
  4. package/package.json +5 -5
  5. package/src/components/BottomSheet/BottomSheetContext.ts +11 -0
  6. package/src/components/BottomSheet/ScrollView.tsx +57 -0
  7. package/src/components/BottomSheet/__tests__/__snapshots__/index.spec.tsx.snap +9 -24
  8. package/src/components/BottomSheet/__tests__/index.spec.tsx +17 -0
  9. package/src/components/BottomSheet/index.tsx +21 -8
  10. package/src/components/Box/StyledBox.tsx +8 -6
  11. package/src/components/Card/StyledCard.tsx +1 -1
  12. package/src/components/Card/__tests__/__snapshots__/index.spec.tsx.snap +74 -0
  13. package/src/components/Card/__tests__/index.spec.tsx +2 -0
  14. package/src/components/Card/index.tsx +1 -1
  15. package/src/components/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap +0 -24
  16. package/src/components/Icon/index.tsx +28 -2
  17. package/src/components/Select/MultiSelect/__tests__/__snapshots__/index.spec.tsx.snap +0 -72
  18. package/src/components/Select/SingleSelect/__tests__/__snapshots__/index.spec.tsx.snap +0 -36
  19. package/src/components/TextInput/__tests__/__snapshots__/index.spec.tsx.snap +160 -0
  20. package/src/components/TextInput/__tests__/index.spec.tsx +50 -3
  21. package/src/components/TextInput/index.tsx +65 -30
  22. package/src/components/TimePicker/__tests__/__snapshots__/TimePickerIOS.spec.tsx.snap +0 -24
  23. package/src/components/Toolbar/ToolbarGroup.tsx +20 -14
  24. package/src/components/Toolbar/ToolbarItem.tsx +9 -1
  25. package/src/components/Toolbar/__tests__/__snapshots__/ToolbarGroup.spec.tsx.snap +12 -0
  26. package/src/components/Toolbar/__tests__/__snapshots__/ToolbarItem.spec.tsx.snap +6 -0
  27. package/src/types.ts +4 -1
  28. package/src/utils/__tests__/helpers.spec.ts +22 -4
  29. package/src/utils/helpers.ts +10 -9
  30. package/types/components/BottomNavigation/StyledBottomNavigation.d.ts +1 -1
  31. package/types/components/BottomSheet/BottomSheetContext.d.ts +5 -0
  32. package/types/components/BottomSheet/ScrollView.d.ts +3 -0
  33. package/types/components/BottomSheet/index.d.ts +5 -3
  34. package/types/components/Box/StyledBox.d.ts +2 -2
  35. package/types/components/Button/StyledButton.d.ts +1 -1
  36. package/types/components/Button/UtilityButton/StyledUtilityButton.d.ts +1 -1
  37. package/types/components/Card/StyledCard.d.ts +1 -1
  38. package/types/components/Card/index.d.ts +1 -1
  39. package/types/components/Checkbox/StyledCheckbox.d.ts +1 -1
  40. package/types/components/ContentNavigator/StyledContentNavigator.d.ts +1 -1
  41. package/types/components/FAB/ActionGroup/StyledActionItem.d.ts +1 -1
  42. package/types/components/Icon/index.d.ts +3 -3
  43. package/types/components/TextInput/StyledTextInput.d.ts +7 -7
  44. package/types/components/TextInput/index.d.ts +25 -3
  45. package/types/components/Toolbar/ToolbarItem.d.ts +6 -1
  46. package/types/types.d.ts +3 -2
  47. package/types/utils/helpers.d.ts +2 -2
@@ -2,10 +2,19 @@ import { omit, pick } from '../helpers';
2
2
 
3
3
  describe('pick', () => {
4
4
  it('works', () => {
5
- const keys = ['a', 'b', 'f'];
6
5
  const props = { a: 1, b: true, c: 'outline', d: null, f: 'whatever' };
7
6
 
8
- expect(pick(keys, props)).toEqual({
7
+ expect(pick(['a', 'b', 'f'], props)).toEqual({
8
+ a: 1,
9
+ b: true,
10
+ f: 'whatever',
11
+ });
12
+ });
13
+
14
+ it('work with any', () => {
15
+ const props: any = { a: 1, b: true, c: 'outline', d: null, f: 'whatever' };
16
+
17
+ expect(pick(['a', 'b', 'f'], props)).toEqual({
9
18
  a: 1,
10
19
  b: true,
11
20
  f: 'whatever',
@@ -15,10 +24,19 @@ describe('pick', () => {
15
24
 
16
25
  describe('omit', () => {
17
26
  it('works', () => {
18
- const keys = ['a', 'b'];
19
27
  const props = { a: 1, b: true, c: 'outline', d: null, f: 'whatever' };
20
28
 
21
- expect(omit(keys, props)).toEqual({
29
+ expect(omit(['a', 'b'], props)).toEqual({
30
+ c: 'outline',
31
+ d: null,
32
+ f: 'whatever',
33
+ });
34
+ });
35
+
36
+ it('work with any', () => {
37
+ const props: any = { a: 1, b: true, c: 'outline', d: null, f: 'whatever' };
38
+
39
+ expect(omit(['a', 'b'], props)).toEqual({
22
40
  c: 'outline',
23
41
  d: null,
24
42
  f: 'whatever',
@@ -3,23 +3,24 @@ import { Platform } from 'react-native';
3
3
  export const isIOS = Platform.OS === 'ios';
4
4
  export const isAndroid = Platform.OS === 'android';
5
5
 
6
- export const pick = (keys: Array<string>, props: Record<string, any>) =>
7
- keys
8
- .filter((key) => key in props)
9
- .reduce(
6
+ export function pick<O, T extends keyof O>(keys: T[], obj: O): Pick<O, T> {
7
+ return keys
8
+ .filter((key) => key in obj)
9
+ .reduce<Partial<O>>(
10
10
  (result, cur) => ({
11
11
  ...result,
12
- [cur]: props[cur],
12
+ [cur]: obj[cur],
13
13
  }),
14
14
  {}
15
- );
15
+ ) as Pick<O, T>;
16
+ }
16
17
 
17
- export const omit = (keys: Array<string>, props: Record<string, any>) => {
18
- const result = props;
18
+ export function omit<O, T extends keyof O>(keys: T[], obj: O): Omit<O, T> {
19
+ const result = obj;
19
20
 
20
21
  keys.forEach((key) => {
21
22
  delete result[key];
22
23
  });
23
24
 
24
25
  return result;
25
- };
26
+ }
@@ -44,7 +44,7 @@ declare const BottomBarItem: import("@emotion/native").StyledComponent<import("r
44
44
  }, {}, {
45
45
  ref?: import("react").Ref<View> | undefined;
46
46
  }>;
47
- declare const StyledBottomBarText: import("@emotion/native").StyledComponent<import("../Typography/Text").TextProps & {
47
+ declare const StyledBottomBarText: import("@emotion/native").StyledComponent<import("../..").TextProps & {
48
48
  theme?: import("@emotion/react").Theme | undefined;
49
49
  as?: import("react").ElementType<any> | undefined;
50
50
  }, {}, {}>;
@@ -0,0 +1,5 @@
1
+ export declare type BottomSheetContextType = {
2
+ setInternalShowDivider: (value: boolean) => void;
3
+ };
4
+ declare const BottomSheetContext: import("react").Context<BottomSheetContextType>;
5
+ export default BottomSheetContext;
@@ -0,0 +1,3 @@
1
+ import { ScrollViewProps } from 'react-native';
2
+ declare const BottomSheetScrollView: ({ scrollEventThrottle, ...props }: ScrollViewProps) => JSX.Element;
3
+ export default BottomSheetScrollView;
@@ -1,6 +1,6 @@
1
- import { KeyboardAvoidingViewProps } from 'react-native';
2
1
  import type { ReactElement, ReactNode } from 'react';
3
2
  import type { StyleProp, ViewStyle } from 'react-native';
3
+ import { KeyboardAvoidingViewProps } from 'react-native';
4
4
  interface BottomSheetProps {
5
5
  /**
6
6
  * Bottom sheet open state.
@@ -60,5 +60,7 @@ interface BottomSheetProps {
60
60
  * */
61
61
  keyboardAvoidingViewProps?: KeyboardAvoidingViewProps;
62
62
  }
63
- declare const BottomSheet: ({ open, header, footer, children, onAnimationEnd, onOpen, onRequestClose, onDismiss, showCloseButton, hasBackdrop, showDivider, style, testID, keyboardAvoidingViewProps, }: BottomSheetProps) => JSX.Element;
64
- export default BottomSheet;
63
+ declare const _default: (({ open, header, footer, children, onAnimationEnd, onOpen, onRequestClose, onDismiss, showCloseButton, hasBackdrop, showDivider, style, testID, keyboardAvoidingViewProps, }: BottomSheetProps) => JSX.Element) & {
64
+ ScrollView: ({ scrollEventThrottle, ...props }: import("react-native").ScrollViewProps) => JSX.Element;
65
+ };
66
+ export default _default;
@@ -1,6 +1,6 @@
1
1
  import { Theme } from '@emotion/react';
2
2
  import { View } from 'react-native';
3
- import { StyleProps } from './types';
3
+ import { FlexStyleProps, StyleProps } from './types';
4
4
  export declare const getThemeValue: (theme: Theme, key: keyof StyleProps, props: StyleProps) => {
5
5
  [x: string]: string;
6
6
  } | {
@@ -9,7 +9,7 @@ export declare const getThemeValue: (theme: Theme, key: keyof StyleProps, props:
9
9
  declare const StyledBox: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
10
10
  theme?: Theme | undefined;
11
11
  as?: import("react").ElementType<any> | undefined;
12
- } & StyleProps, {}, {
12
+ } & StyleProps & FlexStyleProps, {}, {
13
13
  ref?: import("react").Ref<View> | undefined;
14
14
  }>;
15
15
  export { StyledBox };
@@ -11,7 +11,7 @@ declare const StyledButtonContainer: import("@emotion/native").StyledComponent<i
11
11
  }, {}, {
12
12
  ref?: import("react").Ref<TouchableOpacity> | undefined;
13
13
  }>;
14
- declare const StyledButtonText: import("@emotion/native").StyledComponent<import("../Typography/Text").TextProps & {
14
+ declare const StyledButtonText: import("@emotion/native").StyledComponent<import("../..").TextProps & {
15
15
  theme?: Theme | undefined;
16
16
  as?: import("react").ElementType<any> | undefined;
17
17
  } & {
@@ -11,7 +11,7 @@ export declare const IconWrapper: import("@emotion/native").StyledComponent<impo
11
11
  }, {}, {
12
12
  ref?: import("react").Ref<View> | undefined;
13
13
  }>;
14
- export declare const ButtonText: import("@emotion/native").StyledComponent<import("../../Typography/Text").TextProps & {
14
+ export declare const ButtonText: import("@emotion/native").StyledComponent<import("../../..").TextProps & {
15
15
  theme?: import("@emotion/react").Theme | undefined;
16
16
  as?: import("react").ElementType<any> | undefined;
17
17
  }, {}, {}>;
@@ -3,7 +3,7 @@ declare const StyledCard: import("@emotion/native").StyledComponent<import("reac
3
3
  theme?: import("@emotion/react").Theme | undefined;
4
4
  as?: import("react").ElementType<any> | undefined;
5
5
  } & {
6
- themeIntent?: "primary" | "success" | "warning" | undefined;
6
+ themeIntent?: "primary" | "success" | "warning" | "danger" | "archived" | undefined;
7
7
  }, {}, {
8
8
  ref?: import("react").Ref<View> | undefined;
9
9
  }>;
@@ -8,7 +8,7 @@ interface CardProps extends ViewProps {
8
8
  /**
9
9
  * Visual intent color to apply to card.
10
10
  */
11
- intent?: 'primary' | 'success' | 'warning';
11
+ intent?: 'primary' | 'success' | 'warning' | 'danger' | 'archived';
12
12
  /**
13
13
  * Additional style.
14
14
  */
@@ -8,7 +8,7 @@ export declare const StyledWrapper: import("@emotion/native").StyledComponent<im
8
8
  }, {}, {
9
9
  ref?: import("react").Ref<TouchableOpacity> | undefined;
10
10
  }>;
11
- export declare const StyledDescription: import("@emotion/native").StyledComponent<import("../Typography/Text").TextProps & {
11
+ export declare const StyledDescription: import("@emotion/native").StyledComponent<import("../..").TextProps & {
12
12
  theme?: import("@emotion/react").Theme | undefined;
13
13
  as?: import("react").ElementType<any> | undefined;
14
14
  }, {}, {}>;
@@ -5,7 +5,7 @@ declare const Wrapper: import("@emotion/native").StyledComponent<import("react-n
5
5
  }, {}, {
6
6
  ref?: import("react").Ref<View> | undefined;
7
7
  }>;
8
- declare const Value: import("@emotion/native").StyledComponent<import("../Typography/Text").TextProps & {
8
+ declare const Value: import("@emotion/native").StyledComponent<import("../..").TextProps & {
9
9
  theme?: import("@emotion/react").Theme | undefined;
10
10
  as?: import("react").ElementType<any> | undefined;
11
11
  }, {}, {}>;
@@ -7,7 +7,7 @@ declare const StyledActionItem: import("@emotion/native").StyledComponent<Toucha
7
7
  }, {}, {
8
8
  ref?: import("react").Ref<TouchableOpacity> | undefined;
9
9
  }>;
10
- declare const StyledActionItemText: import("@emotion/native").StyledComponent<import("../../Typography/Text").TextProps & {
10
+ declare const StyledActionItemText: import("@emotion/native").StyledComponent<import("../../..").TextProps & {
11
11
  theme?: import("@emotion/react").Theme | undefined;
12
12
  as?: import("react").ElementType<any> | undefined;
13
13
  } & TouchableOpacityProps, {}, {}>;
@@ -1,7 +1,7 @@
1
- import type { StyleProp, TextStyle } from 'react-native';
1
+ import type { AccessibilityProps, StyleProp, TextStyle } from 'react-native';
2
2
  import IconList from './IconList';
3
3
  export declare type IconName = typeof IconList[number];
4
- export interface IconProps {
4
+ export interface IconProps extends AccessibilityProps {
5
5
  /**
6
6
  * Name of the Icon.
7
7
  */
@@ -28,7 +28,7 @@ export interface IconProps {
28
28
  testID?: string;
29
29
  }
30
30
  declare const Icon: {
31
- ({ icon, style, size, intent, testID, spin, }: IconProps): JSX.Element;
31
+ ({ icon, style, size, intent, testID, spin, accessibilityLabel, accessibilityHint, accessibilityRole, accessibilityState, accessibilityValue, accessibilityLiveRegion, accessibilityElementsHidden, accessible, accessibilityIgnoresInvertColors, accessibilityViewIsModal, accessibilityActions, }: IconProps): JSX.Element;
32
32
  List: readonly ["activate", "add-emoji", "add-person", "adjustment", "alignment", "antenna", "archive", "assignment-warning", "bank", "bell", "billing", "bookmark", "box-check", "box", "buildings", "cake", "calendar-clock", "calendar", "candy-box-menu", "caret-down-small", "caret-down", "caret-left-small", "caret-left", "caret-right-small", "caret-right", "caret-up-small", "caret-up", "check-radio", "circle-add", "circle-cancel", "circle-check", "circle-down", "circle-info", "circle-left", "circle-ok", "circle-pencil", "circle-question", "circle-remove", "circle-right", "circle-up", "circle-warning", "clock-3", "clock", "cloud-download", "cloud-upload", "cog", "coin", "contacts", "credit-card", "diamond", "direction-arrows", "directory", "document", "dollar-coin-shine", "double-buildings", "edit-template", "envelope", "expense", "eye-circle", "eye-invisible", "eye", "face-meh", "face-sad", "face-smiley", "feed", "feedbacks", "file-certified", "file-clone", "file-copy", "file-csv", "file-dispose", "file-doc", "file-excel", "file-export", "file-lock", "file-pdf", "file-powerpoint", "file-search", "file-secured", "file-sheets", "file-slide", "file-verified", "file-word", "file", "filter", "folder-user", "folder", "format-bold", "format-heading1", "format-heading2", "format-italic", "format-list-bulleted", "format-list-numbered", "format-underlined", "funnel-filter", "global-dollar", "globe", "graduation-cap", "graph", "happy-sun", "health-bag", "heart", "home", "image", "import", "incident-siren", "instapay", "list", "loading-2", "loading", "location", "lock", "looks-one", "looks-two", "media-content", "menu", "moneybag", "moon", "multiple-stars", "multiple-users", "node", "open-folder", "paperclip", "payment-summary", "pencil", "phone", "piggy-bank", "plane", "play-circle", "print", "raising-hands", "reply-arrow", "reply", "reschedule", "rostering", "save", "schedule-send", "schedule", "search-person", "send", "speaker-active", "speaker", "star-award", "star-badge", "star-medal", "star", "steps-circle", "stopwatch", "suitcase", "survey", "swag", "switch", "tag", "target", "teams", "timesheet", "touch-id", "trash-bin", "unlock", "user", "video-1", "video-2", "wallet", "warning", "activate-outlined", "add-credit-card-outlined", "add-person-outlined", "add-section-outlined", "add-time-outlined", "add", "adjustment-outlined", "alignment-2-outlined", "alignment-outlined", "all-caps", "arrow-down", "arrow-downwards", "arrow-left", "arrow-leftwards", "arrow-right", "arrow-rightwards", "arrow-up", "arrow-upwards", "at-sign", "bell-active-outlined", "bell-outlined", "bell-slash-outlined", "billing-outlined", "body-outlined", "bold", "bookmark-added-outlined", "bookmark-outlined", "box-check-outlined", "box-outlined", "bullet-points", "cake-outlined", "calendar-dates-outlined", "calendar-star-outlined", "camera-outlined", "cancel", "chat-bubble-outlined", "chat-unread-outlined", "checkmark", "circle-add-outlined", "circle-cancel-outlined", "circle-down-outlined", "circle-info-outlined", "circle-left-outlined", "circle-ok-outlined", "circle-question-outlined", "circle-remove-outlined", "circle-right-outlined", "circle-up-outlined", "circle-warning-outlined", "clock-2-outlined", "clock-outlined", "cog-outlined", "coin-outlined", "comment-outlined", "contacts-outlined", "credit-card-outlined", "cup-outlined", "direction-arrows-outlined", "directory-outlined", "document-outlined", "dollar-card-outlined", "dollar-coin-shine-outlined", "dollar-sign", "double-buildings-outlined", "double-left-arrows", "double-right-arrows", "download-outlined", "edit-template-outlined", "email-outlined", "enter-arrow", "envelope-outlined", "expense-outlined", "explore-outlined", "external-link", "eye-invisible-outlined", "eye-outlined", "face-id", "face-meh-outlined", "face-open-smiley-outlined", "face-sad-outlined", "face-smiley-outlined", "feed-outlined", "file-certified-outlined", "file-clone-outlined", "file-copy-outlined", "file-dispose-outlined", "file-dollar-outlined", "file-download-outlined", "file-export-outlined", "file-lock-outlined", "file-outlined", "file-search-outlined", "file-secured-outlined", "file-verified-outlined", "filter-outlined", "folder-outlined", "folder-user-outlined", "funnel-filter-outline", "graph-outlined", "hand-holding-user-outlined", "happy-sun-outlined", "health-bag-outlined", "heart-outlined", "home-active-outlined", "home-outlined", "id-card-outlined", "image-outlined", "import-outlined", "instapay-outlined", "italic", "link-1", "link-2", "list-outlined", "live-help-outlined", "location-outlined", "lock-outlined", "locked-file-outlined", "log-out", "media-content-outlined", "menu-close", "menu-expand", "menu-fold-outlined", "menu-unfold-outlined", "moneybag-outlined", "moon-outlined", "more-horizontal", "more-vertical", "multiple-folders-outlined", "multiple-users-outlined", "near-me-outlined", "node-outlined", "number-points", "number", "payment-summary-outlined", "payslip-outlined", "pencil-outlined", "percentage", "phone-outlined", "piggy-bank-outlined", "plane-outlined", "play-circle-outlined", "print-outlined", "qr-code-outlined", "qualification-outlined", "re-assign", "redeem", "refresh", "remove", "reply-outlined", "restart", "return-arrow", "rostering-outlined", "save-outlined", "schedule-outlined", "search-outlined", "search-secured-outlined", "send-outlined", "share-1", "share-2", "share-outlined", "single-down-arrow", "single-left-arrow", "single-right-arrow", "single-up-arrow", "speaker-active-outlined", "speaker-outlined", "star-outlined", "stopwatch-outlined", "strikethrough", "suitcase-clock-outlined", "suitcase-outlined", "survey-outlined", "switch-outlined", "sync", "target-outlined", "timesheet-outlined", "today-outlined", "transfer", "trash-bin-outlined", "umbrela-outlined", "unavailable", "underline", "unlock-outlined", "upload-outlined", "user-circle-outlined", "user-gear-outlined", "user-outlined", "user-rectangle-outlined", "video-1-outlined", "video-2-outlined", "wallet-outlined"];
33
33
  };
34
34
  export default Icon;
@@ -12,13 +12,13 @@ declare const StyledLabelContainer: import("@emotion/native").StyledComponent<im
12
12
  }, {}, {
13
13
  ref?: import("react").Ref<View> | undefined;
14
14
  }>;
15
- declare const StyledLabel: import("@emotion/native").StyledComponent<import("../Typography/Text").TextProps & {
15
+ declare const StyledLabel: import("@emotion/native").StyledComponent<import("../..").TextProps & {
16
16
  theme?: import("@emotion/react").Theme | undefined;
17
17
  as?: import("react").ElementType<any> | undefined;
18
18
  } & {
19
19
  themeVariant: Variant;
20
20
  }, {}, {}>;
21
- declare const StyledAsteriskLabel: import("@emotion/native").StyledComponent<import("../Typography/Text").TextProps & {
21
+ declare const StyledAsteriskLabel: import("@emotion/native").StyledComponent<import("../..").TextProps & {
22
22
  theme?: import("@emotion/react").Theme | undefined;
23
23
  as?: import("react").ElementType<any> | undefined;
24
24
  } & {
@@ -30,13 +30,13 @@ declare const StyledLabelContainerInsideTextInput: import("@emotion/native").Sty
30
30
  }, {}, {
31
31
  ref?: import("react").Ref<View> | undefined;
32
32
  }>;
33
- declare const StyledLabelInsideTextInput: import("@emotion/native").StyledComponent<import("../Typography/Text").TextProps & {
33
+ declare const StyledLabelInsideTextInput: import("@emotion/native").StyledComponent<import("../..").TextProps & {
34
34
  theme?: import("@emotion/react").Theme | undefined;
35
35
  as?: import("react").ElementType<any> | undefined;
36
36
  } & {
37
37
  themeVariant: Variant;
38
38
  }, {}, {}>;
39
- declare const StyledAsteriskLabelInsideTextInput: import("@emotion/native").StyledComponent<import("../Typography/Text").TextProps & {
39
+ declare const StyledAsteriskLabelInsideTextInput: import("@emotion/native").StyledComponent<import("../..").TextProps & {
40
40
  theme?: import("@emotion/react").Theme | undefined;
41
41
  as?: import("react").ElementType<any> | undefined;
42
42
  } & {
@@ -48,17 +48,17 @@ declare const StyledErrorContainer: import("@emotion/native").StyledComponent<im
48
48
  }, {}, {
49
49
  ref?: import("react").Ref<View> | undefined;
50
50
  }>;
51
- declare const StyledError: import("@emotion/native").StyledComponent<import("../Typography/Text").TextProps & {
51
+ declare const StyledError: import("@emotion/native").StyledComponent<import("../..").TextProps & {
52
52
  theme?: import("@emotion/react").Theme | undefined;
53
53
  as?: import("react").ElementType<any> | undefined;
54
54
  }, {}, {}>;
55
- declare const StyledMaxLengthMessage: import("@emotion/native").StyledComponent<import("../Typography/Text").TextProps & {
55
+ declare const StyledMaxLengthMessage: import("@emotion/native").StyledComponent<import("../..").TextProps & {
56
56
  theme?: import("@emotion/react").Theme | undefined;
57
57
  as?: import("react").ElementType<any> | undefined;
58
58
  } & {
59
59
  themeVariant: Variant;
60
60
  }, {}, {}>;
61
- declare const StyledHelperText: import("@emotion/native").StyledComponent<import("../Typography/Text").TextProps & {
61
+ declare const StyledHelperText: import("@emotion/native").StyledComponent<import("../..").TextProps & {
62
62
  theme?: import("@emotion/react").Theme | undefined;
63
63
  as?: import("react").ElementType<any> | undefined;
64
64
  }, {}, {}>;
@@ -1,7 +1,9 @@
1
1
  import React from 'react';
2
+ import { TextInput as RNTextInput } from 'react-native';
2
3
  import type { TextInputProps as NativeTextInputProps, StyleProp, ViewStyle, TextStyle } from 'react-native';
3
4
  import type { Variant } from './StyledTextInput';
4
5
  import type { IconName } from '../Icon';
6
+ export declare type TextInputHandles = Pick<RNTextInput, 'focus' | 'clear' | 'blur' | 'isFocused' | 'setNativeProps'>;
5
7
  export interface TextInputProps extends NativeTextInputProps {
6
8
  /**
7
9
  * Field label.
@@ -37,7 +39,7 @@ export interface TextInputProps extends NativeTextInputProps {
37
39
  error?: string;
38
40
  /**
39
41
  * Whether the input is required, if true, an asterisk will be appended to the label.
40
- * */
42
+ */
41
43
  required?: boolean;
42
44
  /**
43
45
  * Placeholder text to display.
@@ -47,11 +49,31 @@ export interface TextInputProps extends NativeTextInputProps {
47
49
  * Whether the input is editable.
48
50
  * */
49
51
  editable?: boolean;
52
+ /**
53
+ * Whether the input is disabled.
54
+ */
50
55
  disabled?: boolean;
56
+ /**
57
+ * Whether the input is loading.
58
+ */
51
59
  loading?: boolean;
60
+ /**
61
+ * The max length of the input.
62
+ * If the max length is set, the input will display the current length and the max length.
63
+ * */
52
64
  maxLength?: number;
65
+ /**
66
+ * The helper text to display.
67
+ */
53
68
  helpText?: string;
69
+ /**
70
+ * Customise input value renderer
71
+ */
54
72
  renderInputValue?: (inputProps: NativeTextInputProps) => React.ReactNode;
73
+ /**
74
+ * Component ref.
75
+ */
76
+ ref?: React.Ref<TextInputHandles>;
55
77
  }
56
78
  export declare const getVariant: ({ disabled, error, editable, loading, isEmptyValue, }: {
57
79
  disabled?: boolean | undefined;
@@ -61,5 +83,5 @@ export declare const getVariant: ({ disabled, error, editable, loading, isEmptyV
61
83
  isFocused?: boolean | undefined;
62
84
  isEmptyValue?: boolean | undefined;
63
85
  }) => Variant;
64
- declare const TextInput: ({ label, prefix, suffix, style, textStyle, testID, accessibilityLabelledBy, error, required, editable, disabled, loading, maxLength, helpText, value, defaultValue, renderInputValue, ...nativeProps }: TextInputProps) => JSX.Element;
65
- export default TextInput;
86
+ declare const _default: React.ForwardRefExoticComponent<Pick<TextInputProps, "children" | "label" | "style" | "hitSlop" | "onLayout" | "pointerEvents" | "removeClippedSubviews" | "testID" | "nativeID" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "disabled" | "value" | "onBlur" | "onFocus" | "onPressIn" | "onPressOut" | "allowFontScaling" | "numberOfLines" | "maxFontSizeMultiplier" | "selectionColor" | "textBreakStrategy" | "loading" | "textAlign" | "error" | "textAlignVertical" | "onContentSizeChange" | "onScroll" | "scrollEnabled" | "onChange" | "autoCapitalize" | "autoCorrect" | "autoFocus" | "blurOnSubmit" | "caretHidden" | "contextMenuHidden" | "defaultValue" | "editable" | "keyboardType" | "maxLength" | "multiline" | "onChangeText" | "onEndEditing" | "onSelectionChange" | "onSubmitEditing" | "onTextInput" | "onKeyPress" | "placeholder" | "placeholderTextColor" | "returnKeyType" | "secureTextEntry" | "selectTextOnFocus" | "selection" | "inputAccessoryViewID" | "clearButtonMode" | "clearTextOnFocus" | "dataDetectorTypes" | "enablesReturnKeyAutomatically" | "keyboardAppearance" | "passwordRules" | "rejectResponderTermination" | "selectionState" | "spellCheck" | "textContentType" | "autoComplete" | "importantForAutofill" | "disableFullscreenUI" | "inlineImageLeft" | "inlineImagePadding" | "returnKeyLabel" | "underlineColorAndroid" | "showSoftInputOnFocus" | "prefix" | "suffix" | "textStyle" | "accessibilityLabelledBy" | "required" | "helpText" | "renderInputValue"> & React.RefAttributes<TextInputHandles>>;
87
+ export default _default;
@@ -1,3 +1,4 @@
1
+ import { StyleProp, ViewStyle } from 'react-native';
1
2
  import type { IconName } from '../Icon';
2
3
  export interface ToolbarItemProps {
3
4
  /**
@@ -20,6 +21,10 @@ export interface ToolbarItemProps {
20
21
  * Whether the toolbar item is disabled.
21
22
  */
22
23
  disabled?: boolean;
24
+ /**
25
+ * Addtitional style.
26
+ */
27
+ style?: StyleProp<ViewStyle>;
23
28
  }
24
- declare const ToolbarItem: ({ icon, label, onPress, intent, disabled, }: ToolbarItemProps) => JSX.Element;
29
+ declare const ToolbarItem: ({ icon, label, onPress, intent, disabled, style, }: ToolbarItemProps) => JSX.Element;
25
30
  export default ToolbarItem;
package/types/types.d.ts CHANGED
@@ -2,9 +2,10 @@ import type { BottomNavigationTabType } from './components/BottomNavigation';
2
2
  import type { IconName } from './components/Icon';
3
3
  import type { SingleSelectProps, MultiSelectProps } from './components/Select';
4
4
  import type { TabType } from './components/Tabs';
5
- import type { TextInputProps } from './components/TextInput';
5
+ import type { TextInputProps, TextInputHandles } from './components/TextInput';
6
6
  import type { RichTextEditorRef, RichTextEditorProps } from './components/RichTextEditor';
7
7
  import type { Theme } from './theme';
8
8
  import type { ListRenderOptionInfo, SectionListRenderOptionInfo } from './components/Select/types';
9
9
  import { SwipeableProps } from './components/Swipeable';
10
- export type { BottomNavigationTabType, IconName, SingleSelectProps, MultiSelectProps, ListRenderOptionInfo, SectionListRenderOptionInfo, SwipeableProps, RichTextEditorProps, RichTextEditorRef, TabType, TextInputProps, Theme, };
10
+ import { TextProps } from './components/Typography/Text';
11
+ export type { BottomNavigationTabType, IconName, SingleSelectProps, MultiSelectProps, ListRenderOptionInfo, SectionListRenderOptionInfo, SwipeableProps, RichTextEditorProps, RichTextEditorRef, TabType, TextInputProps, TextProps, TextInputHandles, Theme, };
@@ -1,4 +1,4 @@
1
1
  export declare const isIOS: boolean;
2
2
  export declare const isAndroid: boolean;
3
- export declare const pick: (keys: Array<string>, props: Record<string, any>) => {};
4
- export declare const omit: (keys: Array<string>, props: Record<string, any>) => Record<string, any>;
3
+ export declare function pick<O, T extends keyof O>(keys: T[], obj: O): Pick<O, T>;
4
+ export declare function omit<O, T extends keyof O>(keys: T[], obj: O): Omit<O, T>;