@hero-design/rn 7.12.1 → 7.14.0

package/types/components/RichTextEditor/RichTextEditor.d.ts

@@ -0,0 +1,65 @@
+import React, { Ref } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export interface RichTextEditorRef {
+    requestBlur: VoidFunction;
+}
+export declare type EditorValue = {
+    type: string;
+    children: any;
+}[];
+export interface RichTextEditorProps {
+    /**
+     * Error message
+     */
+    error?: string;
+    /**
+     * Field value
+     */
+    value?: EditorValue;
+    /**
+     * Unique name used to communicate with webview
+     */
+    name: string;
+    /**
+     * Callback function called when the field value changed
+     */
+    onChange: (data: EditorValue) => void;
+    /**
+     * Callback function called when the cursor position changed
+     */
+    onCursorChange?: (params: {
+        position: {
+            top: number;
+        };
+    }) => void;
+    /**
+     * Field placeholder
+     */
+    placeholder?: string;
+    /**
+     * Additional styles
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Field label
+     */
+    label: string;
+    /**
+     * Field helper text
+     */
+    helpText?: string;
+    /**
+     *  Whether the input is required, if true, an asterisk will be appended to the label.
+     * */
+    required?: boolean;
+    /**
+     * Testing ID of the component
+     */
+    testID?: string;
+    /**
+     * Imperative ref to expose the component method
+     */
+    forwardedRef?: Ref<RichTextEditorRef>;
+}
+declare const _default: React.ForwardRefExoticComponent<Omit<RichTextEditorProps, "forwardedRef"> & React.RefAttributes<RichTextEditorRef>>;
+export default _default;

package/types/components/RichTextEditor/StyledRichTextEditor.d.ts

@@ -0,0 +1,16 @@
+import { View } from 'react-native';
+import { WebView } from 'react-native-webview';
+export declare const StyledWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+export declare const StyledWebView: import("@emotion/native").StyledComponent<import("react-native-webview/lib/WebViewTypes").IOSWebViewProps & import("react-native-webview/lib/WebViewTypes").AndroidWebViewProps & import("react-native-webview/lib/WebViewTypes").WindowsWebViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    height: number | undefined;
+}, {}, {
+    ref?: import("react").Ref<WebView<unknown>> | undefined;
+}>;

package/types/components/RichTextEditor/StyledToolbar.d.ts

@@ -0,0 +1,21 @@
+import { TouchableOpacity, View } from 'react-native';
+export declare const StyledToolbarButton: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    selected: boolean;
+}, {}, {
+    ref?: import("react").Ref<TouchableOpacity> | undefined;
+}>;
+export declare const StyledToolbar: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+export declare const StyledSeparator: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;

package/types/components/RichTextEditor/__tests__/EditorToolbar.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/types/components/RichTextEditor/__tests__/MentionList.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/types/components/RichTextEditor/__tests__/RichTextEditor.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/types/components/RichTextEditor/constants.d.ts

@@ -0,0 +1,19 @@
+export declare enum ToolbarEvents {
+    Bold = "bold",
+    Italic = "italic",
+    Underline = "underline",
+    BulletedList = "bulleted-list",
+    NumberedList = "numbered-list",
+    HeadingOne = "heading-one",
+    HeadingTwo = "heading-two"
+}
+export declare enum ToolbarButtonName {
+    Bold = "bold",
+    Italic = "italic",
+    Underline = "underline",
+    BulletedList = "bulletedList",
+    NumberedList = "numberedList",
+    HeadingOne = "headingOne",
+    HeadingTwo = "headingTwo",
+    Seperator = "|"
+}

package/types/components/RichTextEditor/index.d.ts

@@ -0,0 +1,5 @@
+declare const _default: import("react").ForwardRefExoticComponent<Omit<import("./RichTextEditor").RichTextEditorProps, "forwardedRef"> & import("react").RefAttributes<import("./RichTextEditor").RichTextEditorRef>> & {
+    MentionList: ({ name: eventPrefix, render }: import("./MentionList").MentionListProps) => JSX.Element | null;
+    Toolbar: ({ name, buttons, testID, }: import("./EditorToolbar").EditorToolbarProps) => JSX.Element | null;
+};
+export default _default;

package/types/components/RichTextEditor/utils/events.d.ts

@@ -0,0 +1,8 @@
+import { EventEmitter } from 'events';
+export interface Listener<T> {
+    (data: T): void;
+}
+export declare const off: <T>(emitter: EventEmitter, eventName: string, listener: Listener<T>) => void;
+export declare const emit: <T>(emitter: EventEmitter, eventName: string, data: T) => boolean;
+export declare const setMaxListeners: (emitter: EventEmitter, n: number) => void;
+export declare const on: <T>(emitter: EventEmitter, eventName: string, listener: Listener<T>) => () => void;

package/types/components/RichTextEditor/utils/rnWebView.d.ts

@@ -0,0 +1,7 @@
+import WebView from 'react-native-webview';
+export declare const requestBlurEditor: (element: WebView) => void;
+export interface WebViewEventMessage {
+    type: string;
+    data: any;
+}
+export declare const postMessage: (element: WebView, message: WebViewEventMessage) => void;

package/types/components/SectionHeading/index.d.ts

@@ -1,6 +1,6 @@
 import { ReactElement } from 'react';
 import { StyleProp, ViewProps, ViewStyle } from 'react-native';
-import { IconName } from '../Icon';
+import { IconName, IconProps } from '../Icon';
 export interface SectionHeadingProps extends ViewProps {
     /**
      * Heading text.
@@ -9,7 +9,7 @@ export interface SectionHeadingProps extends ViewProps {
     /**
      * Name of the Icon.
      */
-    icon?: IconName;
+    icon?: IconName | ReactElement<IconProps>;
     /**
      * Right corner content
      */

package/types/components/Select/MultiSelect/OptionList.d.ts

@@ -5,5 +5,5 @@ interface OptionListProps<T> extends MultiSelectProps<T> {
      */
     onPress: (value: T[]) => void;
 }
-declare const OptionList: <T>({ keyExtractor, loading, onEndReached, onPress, onQueryChange, options, value, }: Pick<OptionListProps<T>, "loading" | "onPress" | "value" | "options" | "keyExtractor" | "onEndReached" | "onQueryChange">) => JSX.Element;
+declare const OptionList: <T>({ keyExtractor, loading, onEndReached, onPress, onQueryChange, options, value, }: Pick<OptionListProps<T>, "value" | "onPress" | "loading" | "options" | "keyExtractor" | "onEndReached" | "onQueryChange">) => JSX.Element;
 export default OptionList;

package/types/components/Select/SingleSelect/OptionList.d.ts

@@ -5,5 +5,5 @@ interface OptionListProps<T> extends SingleSelectProps<T> {
      */
     onPress: (value: T | null) => void;
 }
-declare const OptionList: <T>({ keyExtractor, loading, onEndReached, onPress, onQueryChange, options, value, }: Pick<OptionListProps<T>, "loading" | "onPress" | "value" | "options" | "keyExtractor" | "onEndReached" | "onQueryChange">) => JSX.Element;
+declare const OptionList: <T>({ keyExtractor, loading, onEndReached, onPress, onQueryChange, options, value, }: Pick<OptionListProps<T>, "value" | "onPress" | "loading" | "options" | "keyExtractor" | "onEndReached" | "onQueryChange">) => JSX.Element;
 export default OptionList;

package/types/components/Tag/StyledTag.d.ts

@@ -1,5 +1,5 @@
 import { View, Text } from 'react-native';
-declare type ThemeIntent = 'success' | 'warning' | 'danger' | 'info';
+declare type ThemeIntent = 'default' | 'primary' | 'info' | 'success' | 'warning' | 'danger' | 'archived';
 declare const StyledView: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;

package/types/components/Tag/index.d.ts

@@ -7,7 +7,7 @@ interface TagProps extends ViewProps {
     /**
      * Visual intent color to apply to Tag.
      */
-    intent?: 'success' | 'warning' | 'danger' | 'info';
+    intent?: 'default' | 'primary' | 'info' | 'success' | 'warning' | 'danger' | 'archived';
     /**
      * Additional style.
      */

package/types/components/TimePicker/types.d.ts

@@ -7,7 +7,7 @@ export interface TimePickerProps {
     /**
      * Current time value. Must be in correct default format or format provided via format prop.
      */
-    value: Date | null;
+    value?: Date;
     /**
      * Input placeholder. Time format will be used as placeholder if not specified.
      */

package/types/components/Typography/Text/StyledText.d.ts

@@ -5,7 +5,7 @@ declare const StyledText: import("@emotion/native").StyledComponent<import("reac
 } & {
     themeFontSize: 'small' | 'medium' | 'large' | 'xlarge' | 'xxxxxlarge';
     themeFontWeight: 'light' | 'regular' | 'semi-bold';
-    themeIntent: 'body' | 'subdued' | 'primary' | 'success' | 'info' | 'warning' | 'danger';
+    themeIntent: 'body' | 'subdued' | 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'inverted';
 }, {}, {
     ref?: import("react").Ref<Text> | undefined;
 }>;

package/types/components/Typography/Text/index.d.ts

@@ -16,7 +16,7 @@ export interface TextProps extends NativeTextProps {
     /**
      * Visual intent color to apply to the text.
      */
-    intent?: 'body' | 'subdued' | 'primary' | 'success' | 'info' | 'warning' | 'danger';
+    intent?: 'body' | 'subdued' | 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'inverted';
     /**
      * Additional style.
      */

package/types/index.d.ts

@@ -1,17 +1,21 @@
 import theme, { getTheme, ThemeProvider, useTheme } from './theme';
 import { scale } from './utils/scale';
+import Accordion from './components/Accordion';
 import Alert from './components/Alert';
 import Avatar from './components/Avatar';
 import Badge from './components/Badge';
 import BottomNavigation from './components/BottomNavigation';
 import BottomSheet from './components/BottomSheet';
 import Button from './components/Button';
+import Calendar from './components/Calendar';
 import Card from './components/Card';
 import Collapse from './components/Collapse';
 import Checkbox from './components/Checkbox';
 import ContentNavigator from './components/ContentNavigator';
+import DatePicker from './components/DatePicker';
 import Divider from './components/Divider';
 import Drawer from './components/Drawer';
+import Empty from './components/Empty';
 import FAB from './components/FAB';
 import Icon from './components/Icon';
 import List from './components/List';
@@ -29,5 +33,6 @@ import TimePicker from './components/TimePicker';
 import Toast from './components/Toast';
 import Toolbar from './components/Toolbar';
 import Typography from './components/Typography';
-export { theme, getTheme, useTheme, scale, ThemeProvider, Alert, Avatar, Badge, BottomNavigation, BottomSheet, Button, Card, Collapse, Checkbox, ContentNavigator, Divider, Drawer, FAB, Icon, List, PinInput, Progress, Spinner, Radio, SectionHeading, Select, Switch, Tabs, Tag, TextInput, TimePicker, Toast, Toolbar, Typography, };
+import RichTextEditor from './components/RichTextEditor';
+export { theme, getTheme, useTheme, scale, ThemeProvider, Accordion, Alert, Avatar, Badge, BottomNavigation, BottomSheet, Button, Calendar, Card, Collapse, Checkbox, ContentNavigator, DatePicker, Divider, Drawer, Empty, FAB, Icon, List, PinInput, Progress, Spinner, Radio, SectionHeading, Select, Switch, Tabs, Tag, TextInput, TimePicker, Toast, Toolbar, Typography, RichTextEditor, };
 export * from './types';

package/types/theme/components/accordion.d.ts

@@ -0,0 +1,13 @@
+import { GlobalTheme } from '../global';
+declare const getAccordionTheme: (theme: GlobalTheme) => {
+    colors: {
+        background: string;
+    };
+    space: {
+        padding: number;
+    };
+    radii: {
+        card: number;
+    };
+};
+export default getAccordionTheme;

package/types/theme/components/button.d.ts

@@ -31,6 +31,18 @@ declare const getButtonTheme: (theme: GlobalTheme) => {
         disabledBackground: string;
         invertedText: string;
         utilityBackground: string;
+        underlayColors: {
+            'filled-primary': string;
+            'filled-secondary': string;
+            'filled-danger': string;
+            'outlined-primary': string;
+            'outlined-secondary': string;
+            'outlined-danger': string;
+            'text-primary': string;
+            'text-secondary': string;
+            'text-danger': string;
+            'basic-transparent': string;
+        };
     };
     lineHeight: {
         default: number;

package/types/theme/components/calendar.d.ts

@@ -0,0 +1,26 @@
+import { GlobalTheme } from '../global';
+declare const getCalendarTheme: (theme: GlobalTheme) => {
+    radii: {
+        default: number;
+    };
+    colors: {
+        background: string;
+        border: string;
+        primary: string;
+        inverted: string;
+    };
+    sizes: {
+        cellWidth: number;
+        cellHeight: number;
+        cellCircleWidth: number;
+        cellCircleHeight: number;
+        markWidth: number;
+        markHeight: number;
+    };
+    space: {
+        rowVerticalPadding: number;
+        headerVerticalPadding: number;
+        headerHorizontalPadding: number;
+    };
+};
+export default getCalendarTheme;

package/types/theme/components/datePicker.d.ts

@@ -0,0 +1,6 @@
+declare const getDatePickerTheme: () => {
+    sizes: {
+        height: number;
+    };
+};
+export default getDatePickerTheme;

package/types/theme/components/empty.d.ts

@@ -0,0 +1,28 @@
+import { GlobalTheme } from '../global';
+declare const getEmptyTheme: (theme: GlobalTheme) => {
+    fontSizes: {
+        title: number;
+        description: number;
+    };
+    colors: {
+        text: string;
+        invertedText: string;
+        subduedText: string;
+        illustrationBackground: string;
+    };
+    sizes: {
+        illustration: number;
+    };
+    space: {
+        medium: number;
+        large: number;
+    };
+    fonts: {
+        title: string;
+        description: string;
+    };
+    radii: {
+        illustration: number;
+    };
+};
+export default getEmptyTheme;

package/types/theme/components/fab.d.ts

@@ -20,6 +20,7 @@ declare const getFABTheme: (theme: GlobalTheme) => {
         actionItemBackground: string;
         backdropBackground: string;
         titleText: string;
+        actionItemText: string;
     };
     sizes: {
         width: number;

package/types/theme/components/list.d.ts

@@ -2,6 +2,7 @@ import { GlobalTheme } from '../global';
 declare const getListTheme: (theme: GlobalTheme) => {
     colors: {
         checkedListItemContainerBackground: string;
+        highlightedListItemContainerBackground: string;
         listItemContainerBackground: string;
         leadingStatus: {
             danger: string;

package/types/theme/components/richTextEditor.d.ts

@@ -0,0 +1,26 @@
+import { GlobalTheme } from '../global';
+declare const getRichTextEditorTheme: (theme: GlobalTheme) => {
+    colors: {
+        toolbarBorderColor: string;
+        toolbarBackgroundColor: string;
+        toolbarButtonSelectedBackground: string;
+    };
+    space: {
+        wrapperMarginBottom: number;
+        toolbarHorizontalPadding: number;
+        editorPadding: number;
+    };
+    borderWidths: {
+        webViewBorderBottomWidth: number;
+    };
+    fontSizes: {
+        editor: number;
+    };
+    sizes: {
+        editorMinHeight: number;
+        toolbarButtonSize: number;
+        toolbarSeparatorWidth: number;
+        toolbarSeparatorHeight: number;
+    };
+};
+export default getRichTextEditorTheme;

package/types/theme/components/tag.d.ts

@@ -4,14 +4,20 @@ declare const getTagTheme: (theme: GlobalTheme) => {
         default: number;
     };
     colors: {
-        danger: string;
-        dangerBackground: string;
+        default: string;
+        defaultBackground: undefined;
+        primary: string;
+        primaryBackground: string;
         info: string;
         infoBackground: string;
         success: string;
         successBackground: string;
         warning: string;
         warningBackground: string;
+        danger: string;
+        dangerBackground: string;
+        archived: string;
+        archivedBackground: string;
     };
     fonts: {
         default: string;

package/types/theme/components/typography.d.ts

@@ -8,6 +8,7 @@ declare const getTypographyTheme: (theme: GlobalTheme) => {
         danger: string;
         warning: string;
         success: string;
+        inverted: string;
     };
     fonts: {
         light: string;

package/types/theme/global/colors.d.ts

@@ -3,8 +3,10 @@ declare const systemPalette: {
     primaryLight: string;
     primaryDark: string;
     primaryBackground: string;
+    primaryBackgroundDark: string;
     secondary: string;
     secondaryLight: string;
+    secondaryBackground: string;
     info: string;
     infoMediumLight: string;
     infoLight: string;
@@ -30,8 +32,10 @@ declare const systemPalette: {
     disabledLightText: string;
     invertedText: string;
     outline: string;
-    archivedDark: string;
     archived: string;
+    archivedLight: string;
+    archivedDark: string;
+    archivedBackground: string;
     black: string;
     inactiveBackground: string;
     shadow: string;

package/types/theme/global/index.d.ts

@@ -6,8 +6,10 @@ declare const getGlobalTheme: (scale: Scale, systemPalette: SystemPalette) => {
         primaryLight: string;
         primaryDark: string;
         primaryBackground: string;
+        primaryBackgroundDark: string;
         secondary: string;
         secondaryLight: string;
+        secondaryBackground: string;
         info: string;
         infoMediumLight: string;
         infoLight: string;
@@ -33,8 +35,10 @@ declare const getGlobalTheme: (scale: Scale, systemPalette: SystemPalette) => {
         disabledLightText: string;
         invertedText: string;
         outline: string;
-        archivedDark: string;
         archived: string;
+        archivedLight: string;
+        archivedDark: string;
+        archivedBackground: string;
         black: string;
         inactiveBackground: string;
         shadow: string;

package/types/theme/index.d.ts

@@ -1,21 +1,26 @@
 import { GlobalTheme, Scale, SystemPalette } from './global';
+import getAccordionTheme from './components/accordion';
 import getAlertTheme from './components/alert';
 import getAvatarTheme from './components/avatar';
 import getBadgeTheme from './components/badge';
 import getBottomNavigationTheme from './components/bottomNavigation';
 import getBottomSheetTheme from './components/bottomSheet';
 import getButtonTheme from './components/button';
+import getCalendarTheme from './components/calendar';
 import getCardTheme from './components/card';
 import getCheckboxTheme from './components/checkbox';
 import getContentNavigatorTheme from './components/contentNavigator';
+import getDatePickerTheme from './components/datePicker';
 import getDividerTheme from './components/divider';
 import getDrawerTheme from './components/drawer';
+import getEmptyTheme from './components/empty';
 import getFABTheme from './components/fab';
 import getIconTheme from './components/icon';
 import getListTheme from './components/list';
 import getPinInputTheme from './components/pinInput';
 import getProgressTheme from './components/progress';
 import getRadioTheme from './components/radio';
+import getRichTextEditorTheme from './components/richTextEditor';
 import getSectionHeadingTheme from './components/sectionHeading';
 import getSelectTheme from './components/select';
 import getSpinnerTheme from './components/spinner';
@@ -29,23 +34,28 @@ import getToolbarTheme from './components/toolbar';
 import getTypographyTheme from './components/typography';
 declare type Theme = GlobalTheme & {
     __hd__: {
+        accordion: ReturnType<typeof getAccordionTheme>;
         alert: ReturnType<typeof getAlertTheme>;
         avatar: ReturnType<typeof getAvatarTheme>;
         badge: ReturnType<typeof getBadgeTheme>;
         bottomNavigation: ReturnType<typeof getBottomNavigationTheme>;
         bottomSheet: ReturnType<typeof getBottomSheetTheme>;
         button: ReturnType<typeof getButtonTheme>;
+        calendar: ReturnType<typeof getCalendarTheme>;
         card: ReturnType<typeof getCardTheme>;
         checkbox: ReturnType<typeof getCheckboxTheme>;
         contentNavigator: ReturnType<typeof getContentNavigatorTheme>;
+        datePicker: ReturnType<typeof getDatePickerTheme>;
         divider: ReturnType<typeof getDividerTheme>;
         drawer: ReturnType<typeof getDrawerTheme>;
+        empty: ReturnType<typeof getEmptyTheme>;
         fab: ReturnType<typeof getFABTheme>;
         icon: ReturnType<typeof getIconTheme>;
         list: ReturnType<typeof getListTheme>;
         pinInput: ReturnType<typeof getPinInputTheme>;
         progress: ReturnType<typeof getProgressTheme>;
         radio: ReturnType<typeof getRadioTheme>;
+        richTextEditor: ReturnType<typeof getRichTextEditorTheme>;
         sectionHeading: ReturnType<typeof getSectionHeadingTheme>;
         select: ReturnType<typeof getSelectTheme>;
         spinner: ReturnType<typeof getSpinnerTheme>;